微信小程序使用腾讯地图

最新推荐文章于 2024-07-04 17:11:58 发布

Retest

最新推荐文章于 2024-07-04 17:11:58 发布

阅读量661

点赞数

分类专栏：地图文章标签：小程序

本文链接：https://blog.csdn.net/qq_41104976/article/details/104521396

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：设置起始跳转页

在wxml里面设置view控件

<view bindtap="toMap" data-address="{{address}}">
  <text>跳转到地图</text>
</view>

js里面设置跳转的值

Page({
  data: {
    address:"成都市"
  },

  onLoad: function (options) {

  },
  toMap(e) {
    wx.navigateTo({
      url: '/pages/map/map?address=' + e.currentTarget.dataset.address,
    })
  }
})

第二步：跳转后对值进行处理

Page({
  data: {
    latitude: "",
    longitude: "",
    markers: [{
      id: 1,
      latitude: "",
      longitude: "",
    }]
  },
  onLoad: function(options) {
    var address = options.address;
    console.log(address);
    this.getLocation(address);
  },
  getLocation(address) {
    var that = this;
    wx.request({
      url: 'https://apis.map.qq.com/ws/geocoder/v1/',
      method: 'get',
      data: {
        key: "",       //这里的key要在腾讯地图上面申请
        address: address
      },
      success(res) {
        console.log(res);
        that.setData({
          latitude: res.data.result.location.lat,
          longitude: res.data.result.location.lng,
          "markers[0]": {
            latitude: res.data.result.location.lat,
            longitude: res.data.result.location.lng
          }
        })
      },
      fail(err) {
        console.log(err);
      }
    })
  }
})

设置map控件的高度，长度以及值（markers是设置显示自己的位置）