微信小程序定位及导航

app.json

"permission": {
  "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
},

wxml

<view>
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
  bindpoitap="markertap" show-location enable-poi show-compass enable-building style="width: 100%; height: 300px;">
  </map>
</view>
<view>
  <button type="primary" bindtap="location">定位</button>
</view>

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    scale:14,//缩放级别，取值范围为3-20
    //当前定位位置
    latitude: '',
    longitude: '',
    //标记点
    markers:[{
      id:"map",
      latitude:'30.721657',
      longitude:'103.996152',
      iconPath:'../../image/location.png',
      alpha:0.9,
      width:'50rpx',
      height:'50rpx'
    }]
  },
  // 定位导航地址
  location(){
    wx.chooseLocation({
      success:function(res){
        console.log(res,"定位")
        wx.openLocation({
          latitude:res.latitude, //要去的纬度-地址
          longitude:res.longitude, //要去的经度-地址
        })
      }
    })
  },
  //获取当前位置
  redirect(){
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res,"当前位置")
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
      }
    })
  },
  // 点击地图标记位置
  markertap(e){
    console.log(e,"点击")
   if(e.detail.name){
    //  开始标记
     this.data.markers[0].latitude=e.detail.latitude;
     this.data.markers[0].longitude=e.detail.longitude;
     this.setData({
      markers:this.data.markers
     })
    //  导航选定地址
     wx.openLocation({
      latitude:e.detail.latitude, //要去的纬度-地址
      longitude:e.detail.longitude, //要去的经度-地址
    })
  }
  },
  onLoad() {
    //获取当前位置
   this.redirect()
  }
})

最后

以上就是欢呼鲜花为你收集整理的微信小程序定位及导航的全部内容，希望文章能够帮你解决微信小程序定位及导航所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。