小程序地图

弄这个地图,找了很久,也怪自己没有好好看官网的例子,百度上一搜全是重复的帖子,转了又转,记录下自己遇到的坑吧。

有三种地图,我们一般用到就是最基本的第一款,代码也是最简洁,无需注册key,方便简洁实用。

首先需在小程序后台引入定位插件
1、页面上点击onChooseLocation事件,直接跳转入小地图,确认地址之后,打印出相应地址信息。

 onChooseLocation () {
        wx.chooseLocation({
            success: (res) => {
                console.log(res); 
            }
        });
    },

2、需提交小程序绑定的key值

 data: {
    speedName: '',
    siteName: '',
    position: '',
    hidden: true,
    type: '',
    key: '',//在腾讯位置服务申请的key
    referer: '小程序名', //调用腾讯位置服务相关插件的app的名称
 },
onShow: function(){
   const location = chooseLocation.getLocation();
    if(location != null) {
      console.log(location)
      this.setData({
        position: {
          latitude: location.latitude,
          longitude: location.longitude,
          title: location.name
        }
      });
    }
}
//添加跳转地图的事件
 naviAddress: function() {
    const key = this.data.key; //使用在腾讯位置服务申请的key
    const referer = this.data.referer; //调用插件的app的名称
    const latitude = this.data.latitude
    const longitude = this.data.longitude
    const category = '微信定位'
    if(latitude !="" && longitude !=""){
       const location = JSON.stringify({
         latitude: latitude,
         longitude: longitude
       });
       wx.navigateTo({
         url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category' + category
        });
    }else{

    }
  },

此用法需要一开始的时候输入自己的位置经纬度。获取方法见另一篇文章
https://www.jianshu.com/p/1a0dab809a9d

你可能感兴趣的:(小程序地图)