微信小程序根据文字地址从地图定位

业务需求:点击地址后根据地址显示的文字来从地图定位

比如点击“广东省佛山市祖庙”打开显示的位置同文字地址

准备工作:

1.在 腾讯地图申请key

2.下载小程序SDK

1.index.wxml

<view bindtap="openMap">
  上班地址:
<text>{{address}}</text>
</view>

2.index.js

Page({
  data: {
    address:"广东省佛山市祖庙"
  },
  openMap: function () {
    var that = this;
    // 引入SDK核心类
    var QQMapWX = require('./qqmap-wx-jssdk.min.js');

    // 实例化API核心类
    var demo = new QQMapWX({
      key: '开发密钥(key)' // 必填
    });
    // 调用接口
    demo.geocoder({
      address: this.data.address,
      success: function (res) {
        console.log(res);
        that.setData({
          latitude: res.result.location.lat,
          longitude: res.result.location.lng
        })
        wx.openLocation({
          latitude: that.data.latitude,
          longitude: that.data.longitude,
          scale: 28,
          name: that.data.address,
        })
      },
      fail: function (res) {
        console.log(res);
      },
    })
  },
})

附上github地址:wxapp-ditu

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值