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

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

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

准备工作:

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,907评论 9 295
  • 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的...
    扶桑木下阅读 1,316评论 0 3
  • 梦里的梦里梦到你,依旧那么遥远有距离。你稍微的一点无心之作,依旧能激起我心头的千层浪波。只是我还得装作风平浪静,依...
    默默T阅读 229评论 0 0
  • 想过死 不止一次 但是 死又能解决什么问题呢 什么都不能 只是逃避 于事无补 所以 还活着 活着 挺累 挺苦 难 ...
    照亮Br阅读 256评论 7 2
  • 整天新闻不断, 各种三观毁完, 曾经以为很远, 原来就在身旁。 记:对于他人的价值取向,我无能为力,只希望岁月静好!
    zhanzhan不自喜阅读 318评论 1 0