map

本文介绍地图组件（map）。

使用说明

• map组件是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置z-index为多少，都无法在原生组件之上。
• 请勿在scroll-view中使用map组件。
• css 动画对map组件无效。
• 缩小或者放大了地图比例尺之后，请在onRegionChange函数中重新设置data的scale值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小，具体请参照示例代码regionchange函数部分。基础库1.14.0以上，可以使用default-scale属性替代scale来优化代码。

  Map

  同一个页面需要展示多个 map 组件的话，需要使用不同的 ID 。

markers

标记点，用于在地图上显示标记的位置。

属性名	说明	类型	必填	备注
id	标记点id	Number	否	标记点 id，点击事件回调会返回此 id
latitude	纬度	Float	是	范围 -90 ~ 90
longitude	经度	Float	是	范围 -180 ~ 180
title	标注点名	String	否	-
iconPath	显示的图标	String	是	项目目录下的图片路径，可以用相对路径写法，以’/‘开头则表示相对小程序根目录
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	Number	否	是否透明，默认为 1
width	标注图标宽度	Number	否	默认为图片的实际宽度
height	标注图标高度	Number	否	默认为图片的实际高度
callout	自定义标记点上方的气泡窗口	Object	否	marker 上的气泡，地图上最多同时展示一个，绑定 onCalloutTap { content:”xxx”}
anchorX	经纬度在标注图标的锚点-横向值	Double	否	这两个值需要成对出现，anchorX表示横向(0-1)，y表示竖向(0-1)， anchorX:0.5, anchorY:1 表示底边中点
anchorY	经纬度在标注图标的锚点-竖向值	Double	否
customCallout	callout背景自定义 目前只支持高德地图 style	Object	否	{ “type”: 2, “descList”: [{ “desc”: “预计”, “descColor”: “#333333” }, { “desc”: “5分钟”, “descColor”: “#108EE9” }, { “desc”: “到达”, “descColor”: “#333333” }], “isShow”: 1}
iconAppendStr	marker 图片可以来源于 View	String	否	和 iconPath 一起使用，会将 iconPath 对应的图片及该字符串共同生成一个图片，当成 marker 的图标
iconAppendStrColor	marker 图片可以来源于 View，底部描述文本颜色	String	否	默认是：#33B276
fixedPoint	基于屏幕位置扎点	Object	否	基于屏幕位置扎点 { //距离地图左上角的像素数,Number originX:100, originY:100}
markerLevel	marker 在地图上的绘制层级	Number	否	与地图上其他覆盖物统一的 Z 坐标系
label	marker 上的气泡	Object	否	marker 上的气泡，地图上可同时展示多个，绑定onMarkerTap { content:”Hello Label”, color:”#000000”, fontSize:12, borderRadius:3, bgColor:”#ffffff”, padding:5,}
style	自定义 marker 样式	Object	否	自定义 marker 的样式和内容

polygon

用于构造多边形对象。

polyline

用于指定一系列坐标点，从数组第一项连线至最后一项。

circles

用于在地图上显示圆。

controls

用于在地图上显示控件，控件不随着地图移动。

position

控件在地图的位置，以及控件的大小。

callout

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

customCallout

自定义 callout 背景。目前只支持高德地图 style 。

fixedPoint

基于屏幕位置的扎点。

地图组件的经纬度是必需设置的, 若未设置经纬度，则默认是北京的经纬度。

Marker 图鉴

Marker 样式优先级说明

• customCallout，callout与label互斥，优先级排序为：label>customCallout>callout。
• style与icon互斥，优先级排序为：style>iconAppendStr；style>icon。

  style

  | 结构 | 图片示例 | 支持版本 | | —- | —- | —- | | { type:1, text1:”Style1”, icon1:’xxx’, icon2:’xxx’} | | - | | { type:2, text1:”Style2”, icon1:’xxx’, icon2:’xxx’} | | - | | { type:3, icon:xxx, //选填 text:xxx, //必填 color:xxx, //默认#33B276 bgColor:xxx, //默认#FFFFFF gravity:”left/center/right”, //默认 center fontType:”small/standard/large” //默认standard} | | - |

customCallout

label

结构	图片示例	支持版本
{ “type”: 0, “time”: “3”, “descList”: [{ “desc”: “点击立即打车”, “descColor”: “#ffffff” }], “isShow”: 1}		-
{ “type”: 1, “time”: “3”, “descList”: [{ “desc”: “点击立即打车”, “descColor”: “#333333” }], “isShow”: 1}		-
{ “type”: 2, “descList”: [{ “desc”: “预计”, “descColor”: “#333333” }, { “desc”: “5分钟”, “descColor”: “#108EE9” }, { “desc”: “到达”, “descColor”: “#333333” }], “isShow”: 1}		-

结构	图鉴	支持版本
{ content:”Hello Label”, color:”#000000”, fontSize:16, borderRadius:5, bgColor:”#ffffff”, padding:12,}		-

• content：必填
• color：选填，默认”#000000”
• fontsize：选填，默认14
• borderRadius：选填，默认20
• bgColor：选填，默认”#FFFFFF”
• padding：选填，默认10

  图示

  

  示例代码

  <view>
  <map id="map" longitude="120.131441" latitude="30.279383" scale="{{scale}}" controls="{{controls}}"
  onControlTap="controltap" markers="{{markers}}"
  onMarkerTap="markertap"
  polyline="{{polyline}}" circles="{{circles}}"
  onRegionChange="regionchange"
  onTap="tap"
  show-location style="width: 100%; height: 300px;"
  include-points="{{includePoints}}"></map>
  <button onTap="changeScale">改scale</button>
  <button onTap="getCenterLocation">getCenterLocation</button>
  <button onTap="moveToLocation">moveToLocation</button>
  <button onTap="changeCenter">改center</button>
  <button onTap="changeMarkers">改markers</button>
  </view>

  Page({
  data: {
    scale: 14,
    longitude: 120.131441,
    latitude: 30.279383,
    markers: [{
      iconPath: "/image/green_tri.png",
      id: 10,
      latitude: 30.279383,
      longitude: 120.131441,
      width: 50,
      height: 50
    },{
      iconPath: "/image/green_tri.png",
      id: 10,
      latitude: 30.279383,
      longitude: 120.131441,
      width: 50,
      height: 50,
      customCallout: {
        type: 1,
        time: '1',
      },
      fixedPoint:{
        originX: 400,
        originY: 400,
      },
      iconAppendStr: '黄龙时代广场test'
    }],
    includePoints: [{
      latitude: 30.279383,
      longitude: 120.131441,
    }],
    polyline: [{
      points: [{
        longitude: 120.131441,
        latitude: 30.279383
      }, {
        longitude: 120.128821,
        latitude: 30.278200
      }, {
        longitude: 120.131618,
        latitude: 30.277600
      }, {
        longitude: 120.132520,
        latitude: 30.279393
      }, {
        longitude: 120.137517,
        latitude: 30.279383
      }],
      color: "#FF0000DD",
      width: 5,
      dottedLine: false
    }],
    circles: [{
      latitude: 30.279383,
      longitude: 120.131441,
      color: "#000000AA",
      fillColor: "#000000AA",
      radius: 80,
      strokeWidth: 5,
    }],
    controls: [{
      id: 5,
      iconPath: '../../resources/pic/2.jpg',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  onReady(e) {
    // 使用 my.createMapContext 获取 map 上下文
    this.mapCtx = my.createMapContext('map')
  },
  getCenterLocation() {
    this.mapCtx.getCenterLocation(function (res) {
      console.log(res.longitude)
      console.log(res.latitude)
    })
  },
  moveToLocation() {
    this.mapCtx.moveToLocation()
  },
  regionchange(e) {
    console.log('regionchange', e);
    // 注意：如果缩小或者放大了地图比例尺以后，请在 onRegionChange 函数中重新设置 data 的
    // scale 值，否则会出现拖动地图区域后，重新加载导致地图比例尺又变回缩放前的大小。
    if (e.type === 'end') {
      this.setData({
        scale: e.scale
      });
    }
  },
  markertap(e) {
    console.log('marker tap', e);
  },
  controltap(e) {
    console.log('control tap', e);
  },
  tap() {
    console.log('tap:');
  },
  changeScale() {
    this.setData({
      scale: 8,
    });
  },
  changeCenter() {
    this.setData({
      longitude: 113.324520,
      latitude: 23.199994,
      includePoints: [{
        latitude: 23.199994,
        longitude: 113.324520,
      }],
    });
  },
  //支持地图不接受手势事件, isGestureEnable为1 表示支持，为0表示不支持
  gestureEnable() {
    this.mapCtx.gestureEnable({isGestureEnable:1});
  },
  //地图是否显示比例尺, showsScale 为1表示显示，为0表示不显示
  showsScale() {
    this.mapCtx.showsScale({isShowsScale:1});
  },
  //地图是否显示指南针, showsCompass 为1表示显示，为0表示不显示
  showsCompass() {
    this.mapCtx.showsCompass({isShowsCompass:1});
  },
  changeMarkers() {
    this.setData({
      markers: [{
        iconPath: "/image/green_tri.png",
        id: 10,
        latitude: 21.21229,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      includePoints: [{
        latitude: 21.21229,
        longitude: 113.324520,
      }],
    });
  },
  })