微信小程序地图获取地址和经纬度信息,可搜索 wx.chooseLocation

144 阅读1分钟

业务场景:点击地点图标后,可以搜索当前地点,点击地图中的浮标确定后,可以填充地址栏。

.wxml  绑定一个catchtap事件

    <view class="cu-form-group">
      <view class="title">位置</view>
      <input placeholder="请输入地址" value="{{address +''+ name}}"></input>
        <!-- 绑定一个catchtap事件 -->
      <text class="cuIcon-locationfill text-orange" catchtap="markertap"></text>
	</view>

.绑定事件

  markertap(e) { // 这是一个事件,在wxml中绑定这个事件,点击浮标后
    // wx.openLocation({ //此设置属于高级APi,可以打开微信内置地图组件
    //   latitude: 31.200040,
    //   longitude: 121.603190,
    // });

    var _this = this;
    wx.chooseLocation({ 
      success: function (res) { // 点击确定后成功回调返回的信息
        var name = res.name // 地点名
        var address = res.address // 地址
        var latitude = res.latitude // 经度
        var longitude = res.longitude // 纬度
        console.log(name + '|' + address + '|' + latitude + '|' + longitude);
        _this.setData({
          name: name,
          address: address,
          latitude: latitude,
          longitude: longitude
        })
      }
    })
  },