微信小程序——map地图组件

关注

原创 2022-04-10 17:10:45 2.5k 阅读 AI 写同款· GEO 优化 ›

微信小程序 地图map组件 SDK 并实现导航 > 主要实现： > 1. 地图上搜索关键字地址 > 2. 对地址设置标记点 > 3. 位置授权被拒后，重新触发授权的处理逻辑 > 4. 实现获取当前位置，计算目标地址与当前位置的距离 > 5. 触发对选中的信息展示弹窗 > 6. 实现开始导航操作 ... 阅读详情

1.wxml

<view>
  <text bindtap="map">选择地图</text>
  <view>
  您选取的地址是{{address}}
  位置名称是{{name}}
  经纬度是{{longitude}}{{latitude}}
  </view>
</view>

2.js

 /**
   * 页面的初始数据
   */
  data: {
    address:'',
    name:'',
    longitude:'',
    latitude:''
  },
  map(v){
    var that = this;
    wx.chooseLocation({
      success: function (res) {
          console.log(res)
          that.setData({
            address: res.address,      //调用成功直接设置地址
            name: res.name,
            longitude: res.longitude,
            latitude: res.latitude
        })
      }
     })
  },

3.json

"plugins": {
    "chooseLocation": {
    "version": "1.0.9",
    "provider": "wx76a9a06e5b4e693e"
    }
  },
  "permission": {
    "scope.userLocation": {
    "desc": "你的位置信息将用于小程序定位"
    }
  },