+
80
-

微信小程序如何内嵌腾讯地图显示位置?

微信小程序如何内嵌腾讯地图显示位置?


网友回复

+
0
-

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
    })
  },

最终效果

我知道答案,我要回答