在开始开发前有几步必要步骤:
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/viewtext{{textData.name}},{{textData.desc}}/texttext{{longitude}}-----{{latitude}}/textWXSS:
.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公里的偏差。













