微信小程序地图 map(2)-木庄网络博客

2.3.0起 end 阶段返回 causedBy，有效值为 drag（拖动导致）、scale（缩放导致）、update（调用更新接口导致） rotate、skew仅在 end 阶段返回

e = {
  causedBy,
  type,
  detail: {
    rotate,
    skew
  }
}

setting

提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew，通过 setData 分开设置时无法同时生效，需通过 settting 统一修改。

// 默认值
const setting = {
  skew: 0,
  rotate: 0,
  showLocation: false,
  showScale: false,
  subKey: '',
  layerStyle: -1,
  enableZoom: true,
  enableScroll: true,
  enableRotate: false,
  showCompass: false,
  enable3D: false,
  enableOverlooking: false,
  enableSatellite: false,
  enableTraffic: false,
}

this.setData({
  // 仅设置的属性会生效，其它的不受影响
  setting: {
    enable3D: true,
    enableTraffic: true
  }
})

marker

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

属性	说明	类型	必填	备注	最低版本
id	标记点 id	number	否	marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
latitude	纬度	number	是	浮点数，范围 -90 ~ 90
longitude	经度	number	是	浮点数，范围 -180 ~ 180
title	标注点名	string	否	点击时显示，callout存在时将被忽略
zIndex	显示层级	number	否		2.3.0
iconPath	显示的图标	string	是	项目目录下的图片路径，支持网络路径、本地路径、代码包路径（2.3.0）
rotate	旋转角度	number	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0
alpha	标注的透明度	number	否	默认 1，无透明，范围 0 ~ 1
width	标注图标宽度	number/string	否	默认为图片实际宽度
height	标注图标高度	number/string	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	1.2.0
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	1.2.0
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点	1.2.0
aria-label	无障碍访问，（属性）元素的额外描述	string	否		2.5.0

marker 上的气泡 callout

属性	说明	类型	最低版本
content	文本	string	1.2.0
color	文本颜色	string	1.2.0
fontSize	文字大小	number	1.2.0
borderRadius	边框圆角	number	1.2.0
borderWidth	边框宽度	number	2.3.0
borderColor	边框颜色	string	2.3.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
anchorX	横向偏移量，向右为正数	number	2.11.0
anchorY	纵向偏移量，向下为正数	number	2.11.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	经纬度数组	array	是	[{latitude: 0, longitude: 0}]
color	线的颜色	string	否	十六进制
width	线的宽度	number	否
dottedLine	是否虚线	boolean	否	默认 false
arrowLine	带箭头的线	boolean	否	默认 false，开发者工具暂不支持该属性	1.2.0
arrowIconPath	更换箭头图标	string	否	在 arrowLine 为 true 时生效	1.6.0
borderColor	线的边框颜色	string	否		1.2.0
borderWidth	线的厚度	number	否		1.2.0

polygon

指定一系列坐标点，根据 points 坐标数据生成闭合多边形

属性	说明	类型	必填	备注	最低版本
points	经纬度数组	array	是	[{latitude: 0, longitude: 0}]	2.3.0
strokeWidth	描边的宽度	number	否		2.3.0
strokeColor	描边的颜色	string	否	十六进制	2.3.0
fillColor	填充颜色	string	否	十六进制
zIndex	设置多边形Z轴数值	number	否		2.3.0

circle

在地图上显示圆

属性	说明	类型	必填	备注
latitude	纬度	number	是	浮点数，范围 -90 ~ 90
longitude	经度	number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	string	否	十六进制
fillColor	填充颜色	string	否	十六进制
radius	半径	number	是
strokeWidth	描边的宽度	number	否

control

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

属性	说明	类型	必填	备注
id	控件id	number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	object	是	控件相对地图位置
iconPath	显示的图标	string	是	项目目录下的图片路径，支持本地路径、代码包路径
clickable	是否可点击	boolean	否	默认不可点击

position

属性	说明	类型	必填	备注
left	距离地图的左边界多远	number	否	默认为0
top	距离地图的上边界多远	number	否	默认为0
width	控件宽度	number	否	默认为图片宽度
height	控件高度	number	否	默认为图片高度

bindregionchange 返回值

属性	说明	类型	备注
type	视野变化开始、结束时触发	string	视野变化开始为begin，结束为end
causedBy	导致视野变化的原因	string	拖动地图导致(drag)、缩放导致(scale)、调用接口导致(update)

Bug & Tip

tip：个性化地图暂不支持工具中调试。请先使用微信客户端进行测试。
tip：地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示alpha值，如：#000000AA
tip：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
tip: map 组件使用的经纬度是火星坐标系，调用 wx.getLocation 接口需要指定 type 为 gcj02
tip：从 2.8.0 起 map 支持同层渲染，更多请参考原生组件使用限制
tip：请注意原生组件使用限制。

比例尺


scale	3	4	5	6	7	8	9	10	11
比例	1000km	500km	200km	100km	50km	50km	20km	10km	5km
scale	12	13	14	15	16	17	18	19	20
比例	2km	1km	500m	200m	100m	50m	50m	20m	10m

示例代码

在开发者工具中预览效果

<!-- map.wxml -->
<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

// map.js
Page({
  data: {
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }],
    polyline: [{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 113.324520,
        latitude: 23.21229
      }],
      color:"#FF0000DD",
      width: 2,
      dottedLine: true
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.detail.markerId)
  },
  controltap(e) {
    console.log(e.detail.controlId)
  }
})