地点搜索map使用-微信小程序

141 阅读1分钟

1.引入腾讯地图插件

mp.weixin.qq.com/wxopen/plug…

2. 页面使用

//latitude longitude 这两个值必须写,否则不显示标记的地址

<button bindtap="getAddress">获取位置信息</button>
<input type="text" value='{{location||""}}' />
<map markers="{{marks}}" style="width:100%;" latitude="{{latitude}}" longitude='{{longitude}}'></map>

//1.引入
const chooseLocation = requirePlugin('chooseLocation');

//2.定义变量
location: '',
marks: [],
latitude: '',
longitude: '',

//3.初始化方法
onShow() {
    if (chooseLocation.getLocation()) {
      const {
        address,
        latitude,
        longitude,
      } = chooseLocation.getLocation();
      let marks = [{
        latitude,
        longitude,
      }]
      this.setData({
        location: address,
        marks,
        latitude: parseFloat(latitude),
        longitude: parseFloat(longitude),
      })
      console.log(this.data.marks)
    } else {
      let that = this
      wx.getLocation({
        type: 'gcj02',
        altitude: true,
        success(res) {
          let {
            latitude,
            longitude,
          } = res
          let marks = [{
            latitude,
            longitude,
          }]
          that.setData({
            marks,
            latitude,
            longitude,
          })
        }
      })
    }
},
//4. 获取方法
getAddress() {
    const key = ''; //使用在腾讯位置服务申请的key
    const referer = ''; //调用插件的app的名称
    const location = JSON.stringify({
      latitude:this.data.latitude,
      longitude:this.data.longitude
    });
    wx.navigateTo({
      url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}`
    });
},