微信小程式:高德API之定位。
阿新 • • 發佈:2018-11-17
在開始開發前有幾步必要步驟:
1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。
2.下載 amap-wx.js開發包,https://lbs.amap.com/api/wx/download
3.登入微信公眾平臺,在 "設定"->"開發設定" 中設定 request 合法域名,將 https://restapi.amap.com 中新增進去
完成以上步驟就可以開始了:
WXML:
<view> <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" polyline="{{polyline}}"></map> </view> <text>{{textData.name}},{{textData.desc}}</text> <text>{{longitude}}-----{{latitude}}</text>
WXSS:
.map {
width: 100%;
height: 600rpx;
border: 1rpx solid #ededed;
}
JS:
const amapFile = require('../../lib/amap-wx.js') // 引用下載的開發包檔案 const mapConf = require('../../lib/config.js') //引用下載的開發包檔案 Page({ /** * 頁面的初始資料 */ data: { markers: [], latitude: '', longitude: '', textData: {} }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function(options) { var that = this; var key = mapConf.Config.key; var MyAmapFun = new amapFile.AMapWX({ key: '建立的Key' }); MyAmapFun.getRegeo({ iconPath: "../../lib/img/mapicon_navi_s.png", //定點陣圖片自己找個圖示 iconWidth: 22, iconHeight: 32, success: function (data) { var marker = [{ id: data[0].id, latitude: data[0].latitude, longitude: data[0].longitude, iconPath: data[0].iconPath, width: data[0].width, height: data[0].height }] that.setData({ markers: marker }); that.setData({ latitude: data[0].latitude }); that.setData({ longitude: data[0].longitude }); that.setData({ textData: { name: data[0].name, desc: data[0].desc } }) }, fail: function (info) {} }) },
結果:
由於是PC 端,應該是按照網路IP地址來定位的。會出現10公里的偏差。