一、Map组件
1.属性

2.makers 标记点用于在地图上显示标记的位置

3.makers 上的气泡 callout

4.makers 上气泡 label

5.polyline 指定一系列坐标系(从数组的第一项连线到最后一项)

6.circles 在地铁上画圆

7.controls 在地图上显示控件，控件不随着地图移动

8.position

9.tips

map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级；
请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件；
css 动画对 map 组件无效；
map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02；
地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度；

10.eg

wxml
  <view class='map'>
    <map id='map' scale='16' 
      longitude='{{longitude}}'
      latitude='{{latitude}}'
      controls='{{controls}}'
      markers='{{markers}}'
      polyline='{{polyline}}'
      style='width: 100%; height: 100%'
      bindcontroltap='bindcontroltap'
      bindtap='bindtap'
      bindupdated='bindupdated'
      bindmarkertap='bindmarkertap'
      show-location='true'
      bindcallouttap='bindcallouttap'
      bindregionchange='bindregionchange'>
    </map>
  </view>

 js

       bindregionchange: function(){

        console.log('视野发生变化时触发...')
      },
      bindcallouttap: function(){

        console.log('点击标记点对应的气泡时触发...')
      },
      bindtap: function(){

        console.log('点击地图时触发...')
      },
      bindupdated: function(){

        console.log('在地图渲染更新完成时触发...')
      },
      bindcontroltap: function(){

        console.log('点击控件时触发...')
      },
      bindmarkertap: function(){

        console.log('点击标记点时触发...')
      },

二、位置API
1.获取位置
wx.getLocation(object) - 获取当前的地理位置、速度

当用户离开小程序后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用； 

参数说明

wx.chooseLocation(object) - 打开地图选择位置
参数说明：

eg:

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

2.查看位置
wx.openLocation(object) - 使用微信内置地图查看位置
参数说明

eg：

wx.getLocation({
  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  success: function(res) {
    var latitude = res.latitude
    var longitude = res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale: 28
    })
  }
})

3.组图组件控制
wx.createMapContext(mapId,this)

创建并返回 map 上下文 mapContext 对象;
在自定义组件下，第二个参数传入组件实例this，以操作组件内 <map/> 组件;
mapContext对象方法列表：
    getCenterLocation object 获取当前地图中心的经纬度，返回的是gcj02坐标系可用于wx.openLocation;
    moveToLocation 无参数 将地图中心移动到当前定位点，需要配合map组件的show-location使用
    translateMarker object  平移marker，带动画
    includePoints object 缩放视野展示所有经纬度
    getRegion object 获取当前地图的视野范围
    getScale object 获取当前地图的缩放级别

eg:

<!-- map.wxml -->
<map id="myMap" show-location />

<button type="primary" bindtap="getCenterLocation">获取位置</button>
<button type="primary" bindtap="moveToLocation">移动位置</button>
<button type="primary" bindtap="translateMarker">移动标注</button>
<button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>

// map.js
Page({
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('myMap')
  },
  getCenterLocation: function () {
    this.mapCtx.getCenterLocation({
      success: function(res){
        console.log(res.longitude)
        console.log(res.latitude)
      }
    })
  },
  moveToLocation: function () {
    this.mapCtx.moveToLocation()
  },
  translateMarker: function() {
    this.mapCtx.translateMarker({
      markerId: 0,
      autoRotate: true,
      duration: 1000,
      destination: {
        latitude:23.10229,
        longitude:113.3345211,
      },
      animationEnd() {
        console.log('animation end')
      }
    })
  },
  includePoints: function() {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude:23.10229,
        longitude:113.3345211,
      }, {
        latitude:23.00229,
        longitude:113.3345211,
      }]
    })
  }
})

4.注意

iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息；

参考资料：
1.地图
2.位置

赏

谢谢您的鼓励

支付宝

微信