沒有申請key需要先申請,進入高德開發平臺 lbs.amap.com/ , 在 開發指南 -> 獲取key 中有詳細操作步驟,在 控制檯 -> 應用管理 -> 我的應用中可以檢視我們建立的key。【相關學習推薦:】
我們可以把key封裝在起來,這樣就不用每次都找了,在 lib資料夾下新建一個 config.js 檔案
var config = { key: "你的key" } module.exports.config = config;
在js裡匯入 高德的js和key就可以呼叫高德地圖api了
var amapFile = require('../../lib/amap-wx.130.js'); //高德js var config = require('../../lib/config.js'); //參照我們的組態檔
建立高德地圖範例並命名為myAmapFun
var key = config.config.key; var myAmapFun = new amapFile.AMapWX({ key: key });
呼叫 getRegeo 方法
myAmapFun.getRegeo({ success: (data) => { //儲存位置的描述資訊( longitude經度 latitude緯度 和位置資訊 ) let textData = {}; textData.name = data[0].name; textData.desc = data[0].desc //將獲取的資訊儲存 this.setData({ textData: textData, longitude: data[0].longitude, latitude: data[0].latitude, // 給該經度緯度加上icon做標記,並調節大小 markers: [{ latitude: data[0].latitude, longitude: data[0].longitude, height: 30, width: 35, iconPath: '../../imgs/locationIcon/site1.png' }] }) }, fail: function(info){ console.log("get Location fail"); } });
我們可以看下輸出成功的data,裡面的資訊我們根據自己的需要取
在wxml檔案中將地圖顯示出來,這邊設定的是寬度100%,高度400px, scale
是地圖的縮放比例
<view class="map_container"> <map class="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" show-location="true" markers="{{markers}}"> </map> </view> <view class="map_text"> <text class="h1">{{textData.name}}</text> <text>{{textData.desc}}</text> </view>
紅色的標記點就是markers的資料;藍色的標記點是show-location="true"展示的,但是真機預覽就沒有了
data: { # 當前位置經度 longitude: "", # 當前位置緯度 latitude: "", # 獲取位置的標記資訊 markers: [], # 獲取位置的位置資訊 poisdatas : [], # 簡單展示資訊使用的 textData: {} }
呼叫高德地圖的getPoiAround介面根據關鍵字獲取附近資訊
get_current_PoiAround(){ var key = config.config.key; var myAmapFun = new amapFile.AMapWX({ key: key }); // getRegeo 獲得當前位置資訊(上面有用到過這個方法) myAmapFun.getRegeo({ success: (data) => { let textData = {}; textData.name = data[0].name; textData.desc = data[0].desc this.setData({ textData: textData, longitude: data[0].longitude, latitude: data[0].latitude, }) }, fail: function(info){ console.log("get Location fail"); } }); // 通過關鍵詞獲取附近的點 myAmapFun.getPoiAround({ // 改變icon圖示的樣式,點選前和點選後的我都暫時設成blue.svg, 如果不設定的話,預設就是一個紅色的小圖示 iconPath: '../../icon/keshan/blue.svg', iconPathSelected: '../../icon/keshan/blue.svg', // 搜尋的關鍵字(POI分類編碼),在官方檔案https://lbs.amap.com/api/javascript-api/download/ 可以下載檢視 querykeywords: '購物', querytypes: '060100', success: (data) => { const markers = data.markers; const poisdatas = data.poisData; let markers_new = [] markers.forEach((item, index) => { // 只取10個點,超過就continue了,forEach是不能使用break和continue關鍵字的 if( index >= 10 ){ return; } // 將我們需要的markers資料重新整理一下存入markers_new中 markers_new.push({ id: item.id, width: item.width, height: item.height, iconPath: item.iconPath, latitude: item.latitude, longitude: item.longitude, // 自定義標記點上方的氣泡視窗 // display | 'BYCLICK':點選顯示; 'ALWAYS':常顯 | callout: { padding: 2, fontSize: 15, bgColor: "#f78063", color: '#ffffff', borderRadius: 5, display: 'BYCLICK', content: poisdatas[index].name } }) }) // 將資料儲存 this.setData({ markers: markers_new, poisdatas: poisdatas }) }, fail: function(info){ wx.showModal({title:info.errMsg}) } }) },
呼叫getPoiAround介面返回成功的結果
bindmarkertap 啟用 makertap圖示點選事件,改變map_text裡面內容
<view class="map_container"> <map class="map" id="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" show-location="true" markers="{{markers}}" bindmarkertap="makertap"> </map> </view> <view class="map_text"> <text class="h1">{{textData.name}}</text> <text wx:if="{{textData.distance != null}}">{{textData.distance}}m</text> <text>{{textData.desc}}</text> </view>
makertap 啟用showMarkerInfo展示標記點資訊,changeMarkerColor改變標記點顏色
makertap(e) { var id = e.detail.markerId; this.showMarkerInfo(id); this.changeMarkerColor(id); },
之前不是說poisdatas存放該點的位置資訊嘛,我們拿到 id 就可以取出來存到textData裡面顯示了
// 展示標記點資訊 showMarkerInfo(i) { const {poisdatas} = this.data; this.setData({ textData: { name: poisdatas[i].name, desc: poisdatas[i].address, distance: poisdatas[i].distance } }) },
如果是點選的那個位置就把iconPath替換成orange.svg,其餘都是blue.svg,並設定被點選的氣泡 display為顯示('ALWAYS'),將修改後的資料重新儲存就可以啦
// 改變標記點顏色 changeMarkerColor(index) { let {markers} = this.data; for (var i = 0; i < markers.length; i++) { if (i == index) { markers[i].iconPath = "../../icon/keshan/orange.svg"; markers[i].callout.display = 'ALWAYS' } else { markers[i].iconPath = "../../icon/keshan/blue.svg"; markers[i].callout.display = 'BYCLICK' } } this.setData({ markers: markers }) },
更多程式設計相關知識,請存取:!!
以上就是淺析小程式中怎麼引入高德地圖的詳細內容,更多請關注TW511.COM其它相關文章!