微信小程序——地图map

地图的注意事项：

1. tip: map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
2. tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件。
3. tip: css 动画对 map 组件无效。
4. tip: map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02

地图的属性：

属性名	类型	默认值	说明	最低版本
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为5-18
markers	Array		标记点
covers	Array		即将移除，请使用 markers
polyline	Array		路线
circles	Array		圆
controls	Array		控件
include-points	Array		缩放视野以包含所有给定的坐标点
show-location	Boolean		显示带有方向的当前定位点
bindmarkertap	EventHandle		点击标记点时触发，会返回marker的id
bindcallouttap	EventHandle		点击标记点对应的气泡时触发，会返回marker的id	1.2.0
bindcontroltap	EventHandle		点击控件时触发，会返回control的id
bindregionchange	EventHandle		视野发生变化时触发
bindtap	EventHandle		点击地图时触发
bindupdated	EventHandle		在地图渲染更新完成时触发	1.6.0

标记点——markers属性：标记点用于在地图上显示标记的位置

id:marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。

latitude:纬度

longitude:经度

title:标注点名

iconPath:显示的图标

rotate:旋转角度

alpha:标注的透明度

width:标注图标的宽度

height:标注图标的高度

callout:自定义标记点上方的气泡窗口

label:为标记点旁边增加标签

anchor:经纬度在标注图标的锚点

marker 上的气泡 callout

属性	说明	类型	最低版本
content	文本	String	1.2.0
color	文本颜色	String	1.2.0
fontSize	文字大小	Number	1.2.0
borderRadius	callout边框圆角	Number	1.2.0
bgColor	背景色	String	1.2.0
padding	文本边缘留白	Number	1.2.0
display	'BYCLICK':点击显示; 'ALWAYS':常显	String	1.2.0
textAlign	文本对齐方式。有效值: left, right, center	String	1.6.0

marker 上的气泡 label

属性	说明	类型	最低版本
content	文本	String	1.2.0
color	文本颜色	String	1.2.0
fontSize	文字大小	Number	1.2.0
x	label的坐标（废弃）	Number	1.2.0
y	label的坐标（废弃）	Number	1.2.0
anchorX	label的坐标，原点是 marker 对应的经纬度	Number	2.1.0
anchorY	label的坐标，原点是 marker 对应的经纬度	Number	2.1.0
borderWidth	边框宽度	Number	1.6.0
borderColor	边框颜色	String	1.6.0
borderRadius	边框圆角	Number	1.6.0
bgColor	背景色	String	1.6.0
padding	文本边缘留白	Number	1.6.0
textAlign	文本对齐方式。有效值: left, right, center	String	1.6.0

路线——polyline指定一系列坐标点，从数组第一项连线至最后一项

points:[{latitude: 0, longitude: 0}]经纬数组

color:线的颜色

width:线的宽度

dottedLine:是否为虚线

arrowLine:带箭头的线

arrowIconPath:更换箭头图标

borderColor:线的边框颜色

borderWidth:线的厚度

圆——circles

latitude:纬度

longitude:经度

color:描边的颜色

fillColor:填充颜色

radius:半径

strokWidth:描边的宽度

举个例子：

<map id="map" longitude="116.410440" latitude="39.970830" scale="14" controls="{{controls}}" bindtap="openMap" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 150px;"></map>

相关api：wx.createMapContext

这是api的例子：

<!-- 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>

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,
      }]
    })
  }
})

wx.createMapContext(mapId, this)

方法	参数	说明	最低版本
getCenterLocation	OBJECT	获取当前地图中心的经纬度，返回的是 gcj02 坐标系，可以用于 wx.openLocation
moveToLocation	无	将地图中心移动到当前定位点，需要配合map组件的show-location使用
translateMarker	OBJECT	平移marker，带动画	1.2.0
includePoints	OBJECT	缩放视野展示所有经纬度	1.2.0
getRegion	OBJECT	获取当前地图的视野范围	1.4.0
getScale	OBJECT	获取当前地图的缩放级别	1.4.0