微信小程序如何内嵌腾讯地图显示位置?
网友回复
wxml
<map id="map" style="height:600rpx;width:100%;" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}"></map>
在app.json中添加一个获取当前gps经纬度位置的授权,如果不获取当前手机位置的话可以直接传经纬度数据。
{ "pages": ["pages/index/index"], "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位 } } }
添加完后小程序运行会弹出提示
js
onLoad: function (options) { wx.getLocation({ type:'gcj02', success:res=>{ this.setData({ longitude: res.longitude, latitude: res.latitude }) this.addMark(res); } }) }, addMark(res){ var marker=[] marker.push({ id:1, //标记点 id width:50, longitude: res.longitude, latitude: res.latitude, label:{ content:'我的位置', color:'#f00', fontSize:20 }, callout:{ content:'气泡', color:"#f00", fontSize:30 }, iconPath:'/images/center.png' }) this.setData({ markers:marker }) },最终效果