美文网首页
小程序根据地址名称定位位置

小程序根据地址名称定位位置

作者: 磨人的磨磨虫 | 来源:发表于2018-08-28 18:01 被阅读17次

小程序根据地址名称定位位置

获取申请开发者密钥(key) 地址:http://lbs.qq.com/qqmap_wx_jssdk/index.html,
下载并引入核心库‘qqmap-wx-jssdk.js’

//引入

import QQMapWX from '../../utils/map/qqmap-wx-jssdk.min.js';

const qqmapsdk 

// data属性

data:{

    address:'超人学院',

    location:{

          lat:0,

          lng:0

    }

}

page{

onLoad(){

    qqmapsdk = new QQMapWX({

        key: '***************************'

      });

    this.getLocation()

},
//使用微信的map api 打开位置

openMap: function (e) {

      var name = e.currentTarget.dataset.name;

      var address = e.currentTarget.dataset.address;

      let location = this.data.location

      console.log(location)

      wx.openLocation({

        latitude: location.lat,

        longitude: location.lng,

        scale: 18,

        name: name,

        address: address,

        success: function (res) {

        }

      });

    }

,

//获取店铺地址经纬度

getLocation() {

      let address = this.address

      qqmapsdk.geocoder({

        address: address, //要转化为经纬度的地址名称

        success: res=> {

          //res里包含了该地址的信息

          let qqRes = res

          this.setData({

            location:{

              lat: qqRes.result.location.lat,

              lng: qqRes.result.location.lng

            }

          })

        },

        fail: res=>{

          //如果查不到这个地址就显示当前地址

          wx.getLocation({

            type: 'wgs84',

            success: res=> {

              var latitude = res.latitude

              var longitude = res.longitude

              this.setData({

                location: {

                  lat: latitude,

                  lng: longitude

                },

              })

            }

          })

        }

      });

    }

}

因为赶项目这里不做太多阐述,大概流程是   申请key并下载js和谐库-> 引入并加载获取地址经纬度->最后当然是用经纬度调用小程序得wx.openLocation,方法不知道得 自己去看文档

相关文章

网友评论

      本文标题:小程序根据地址名称定位位置

      本文链接:https://www.haomeiwen.com/subject/nqpqwftx.html