微信小程序中的地图的使用

微信小程序中的地图组件

{
  "id": 0,
  "latitude": 23.10229,
  "longitude": 113.3345211,
  "title": "Marker Title",
  "iconPath": "/resources/marker.png",
  "width": 50,
  "height": 50
}

polyline: 路线数组，每一项是一个对象，如下：

{
  "points": [
    {"latitude": 23.10229, "longitude": 113.3345211},
    {"latitude": 23.00229, "longitude": 113.3345211}
  ],
  "color": "#FF0000DD",
  "width": 2,
  "dottedLine": false
}

circles: 圆数组，每一项是一个对象，如下：

{
  "latitude": 23.10229,
  "longitude": 113.3345211,
  "color": "#FF0000DD",
  "fillColor": "#000000DD",
  "radius": 100,
  "strokeWidth": 2
}

其他属性
include-points: 视野内显示的所有点的坐标数组，会自动缩放地图以包含所有该数组内的点。
show-location: 是否显示带有方向的当前定位点。
layer-style: 个性化地图层的样式 id（目前只支持 2D 地图）。
subkey: 个性化地图使用的 key。
rotate: 旋转角度，范围 0 ~ 360。
skew: 倾斜角度，范围 0 ~ 40。
enable-3D: 是否开启 3D 地图。
show-compass: 是否显示指南针。
enable-overlooking: 是否开启俯视。
enable-zoom: 是否支持缩放。
enable-scroll: 是否支持拖动。
enable-rotate: 是否支持旋转。
2.

WXML 部分

<view class="container">
  <map 
    id="myMap"
    longitude="113.324520"
    latitude="23.099994"
    scale="14"
    markers="{{markers}}"
    bindmarkertap="onMarkerTap"
    bindregionchange="onRegionChange"
    style="width: 100%; height: 300px;">
  </map>
</view>

JS 部分

Page({
  data: {
    markers: [{
      iconPath: "/resources/marker.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }]
  },
  onMarkerTap: function (e) {
    console.log('Marker tap', e)
  },
  onRegionChange: function (e) {
    console.log('Region change', e)
  }
})