微信小程序地图 map

2020-07-24 15:18 更新
基础库 1.0.0 开始支持,低版本需做兼容处理。

地图(v2.7.0 起支持同层渲染)。相关api wx.createMapContext

个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通。 小程序内地图组件应使用同一 subkey,可通过 layer-style(地图官网设置的样式 style 编号)属性选择不同的底图风格。 组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

示例小程序

属性类型默认值必填说明最低版本
longitudenumber中心经度1.0.0
latitudenumber中心纬度1.0.0
scalenumber16缩放级别,取值范围为3-201.0.0
markersArray.<marker>标记点1.0.0
coversArray.<cover>即将移除,请使用 markers1.0.0
polylineArray.<polyline>路线1.0.0
circlesArray.<circle>1.0.0
controlsArray.<control>控件(即将废弃,建议使用 cover-view 代替)1.0.0
include-pointsArray.<point>缩放视野以包含所有给定的坐标点1.0.0
show-locationbooleanfalse显示带有方向的当前定位点1.0.0
polygonsArray.<polygon>多边形2.3.0
subkeystring个性化地图使用的key2.3.0
layer-stylenumber1个性化地图配置的 style,不支持动态修改
rotatenumber0旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角2.5.0
skewnumber0倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角2.5.0
enable-3Dbooleanfalse展示3D楼块(工具暂不支持)2.3.0
show-compassbooleanfalse显示指南针2.3.0
show-scalebooleanfalse显示比例尺,工具暂不支持2.8.0
enable-overlookingbooleanfalse开启俯视2.3.0
enable-zoombooleantrue是否支持缩放2.3.0
enable-scrollbooleantrue是否支持拖动2.3.0
enable-rotatebooleanfalse是否支持旋转2.3.0
enable-satellitebooleanfalse是否开启卫星图2.7.0
enable-trafficbooleanfalse是否开启实时路况2.7.0
settingobject配置项2.8.2
bindtapeventhandle点击地图时触发,2.9.0起返回经纬度信息1.0.0
bindmarkertapeventhandle点击标记点时触发,e.detail = {markerId}1.0.0
bindlabeltapeventhandle点击label时触发,e.detail = {markerId}2.9.0
bindcontroltapeventhandle点击控件时触发,e.detail = {controlId}1.0.0
bindcallouttapeventhandle点击标记点对应的气泡时触发e.detail = {markerId}1.2.0
bindupdatedeventhandle在地图渲染更新完成时触发1.6.0
bindregionchangeeventhandle视野发生变化时触发,2.3.0
bindpoitapeventhandle点击地图poi点时触发,e.detail = {name, longitude, latitude}2.3.0

regionchange 返回值

视野改变时,regionchange 会触发两次,返回的 type 值分别为 begin / end。

2.8.0起 begin 阶段返回 causedBy,有效值为 gesture(手势触发) & update(接口触发)

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标记点 idnumbermarker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。
latitude纬度number浮点数,范围 -90 ~ 90
longitude经度number浮点数,范围 -180 ~ 180
title标注点名string点击时显示,callout存在时将被忽略
zIndex显示层级number2.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无障碍访问,(属性)元素的额外描述string2.5.0

marker 上的气泡 callout

属性说明类型最低版本
content文本string1.2.0
color文本颜色string1.2.0
fontSize文字大小number1.2.0
borderRadius边框圆角number1.2.0
borderWidth边框宽度number2.3.0
borderColor边框颜色string2.3.0
bgColor背景色string1.2.0
padding文本边缘留白number1.2.0
display'BYCLICK':点击显示; 'ALWAYS':常显string1.2.0
textAlign文本对齐方式。有效值: left, right, centerstring1.6.0
anchorX横向偏移量,向右为正数number2.11.0
anchorY纵向偏移量,向下为正数number2.11.0

marker 上的气泡 label

属性说明类型最低版本
content文本string1.2.0
color文本颜色string1.2.0
fontSize文字大小number1.2.0
xlabel的坐标(废弃)number1.2.0
ylabel的坐标(废弃)number1.2.0
anchorXlabel的坐标,原点是 marker 对应的经纬度number2.1.0
anchorYlabel的坐标,原点是 marker 对应的经纬度number2.1.0
borderWidth边框宽度number1.6.0
borderColor边框颜色string1.6.0
borderRadius边框圆角number1.6.0
bgColor背景色string1.6.0
padding文本边缘留白number1.6.0
textAlign文本对齐方式。有效值: left, right, centerstring1.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线的边框颜色string1.2.0
borderWidth线的厚度number1.2.0

polygon

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

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

circle

在地图上显示圆

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

control

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

属性说明类型必填备注
id控件idnumber在控件点击事件回调会返回此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

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

比例尺

scale34567891011
比例1000km500km200km100km50km50km20km10km5km
scale121314151617181920
比例2km1km500m200m100m50m50m20m10m

示例代码

在开发者工具中预览效果

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


以上内容是否对您有帮助:
前端课程
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部