map地图API

本文编辑：  Mirror浏览 6832 5 版权所有，严禁转载

接口说明:

• 本节主要介绍微信小程序API中获取位置和打开位置这两个接口的使用方法，以及获取位置接口在map标签上的应用。

接口用法：

注： 上图所演示的是页面加载完成后用map标签显示用户当前位置，当点击按钮时跳转至微信地图显示用户当前位置。

wxml

<view>
    <button type="primary" bindtap="showLocation">获取当前地理位置并在地图中打开</button>
</view>
<map longitude="{{location.longitude}}" latitude="{{location.latitude}}" markers="{{markers}}" covers="{{covers}}"></map>

js

Page({
  data:{},
  onLoad:function(options){
    var _this = this;
    wx.getLocation({
      type: 'wgs84',
      success: function(res){
        var longitude = res.longitude, latitude = res.latitude;
        _this.setData({
          location: {
            latitude: latitude,
            longitude: longitude,
          },
          markers:[{
            latitude: latitude,
            longitude: longitude,
            name: '微信小程序社区',
            desc: '我在这里'
          }],
          covers: [{
            latitude: latitude,
            longitude: longitude,
            iconPath: '../images/car.png',
            rotate: 10
          }]
        });
      }
    })
  },
  showLocation: function(e) {
    var _this = this;
    var location = _this.data.location;
    wx.openLocation({
      latitude: location.latitude,      // 纬度，范围为-90~90，负数表示南纬
      longitude: location.longitude,    // 经度，范围为-180~180，负数表示西经
      scale: 28,               // 缩放比例
      name: '微信小程序社区',   // 位置名
      address: '我还是在这里'       // 地址的详细说明
    });
  }
})

注： 由于map标签所有属性的值不支持动态变化，只能在页面加载完成时设置。所以本示例中为了达到将用户位置设置到map标签的效果，在onload函数中就直接调用了wx.getLocation并将位置信息绑定到了变量中。

wxss

button {
    width: 700rpx;
    margin: 200rpx auto 0 auto;
}
map {
    width: 700rpx;
    height: 600rpx;
    margin: 30rpx auto;
}

主要方法：

wx.getLocation(OBJECT)

OBJECT参数说明

success返回参数说明：

wx.openLocation(OBJECT)

OBJECT参数说明