创新互联小程序教程：微信小程序地图map

基础库 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.否标记点1.0.0
coversArray.否即将移除，请使用 markers1.0.0
polylineArray.否路线1.0.0
circlesArray.否圆1.0.0
controlsArray.否控件（即将废弃，建议使用 cover-view 代替）1.0.0
include-pointsArray.否缩放视野以包含所有给定的坐标点1.0.0
show-locationbooleanfalse否显示带有方向的当前定位点1.0.0
polygonsArray.否多边形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标记点 idnumber否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文本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线的边框颜色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控件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.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)
  }
})

分享题目：创新互联小程序教程：微信小程序地图map
链接分享：http://www.gawzjz.com/qtweb/news47/200347.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

用户体验知识

同城分类信息

公司logo设计　　 　服务器托管　　 　网站推广优化　　 　成都网站推广　　 　免备案空间　　 　成都网站排名　　 　四川和正源　　 　四川成都展柜定制厂家　　 　微信公众号开发　　 　重庆外贸网站建设　　 　广告品牌策划设计　　 　四川电信机房托管　　 　虚拟主机购买　　 　移动机房服务器托管　　 　成都企业网站建设　　 　德阳电信机房　　 　广汉锦华建材　　 　成都茶叶销售　　 　成都微信小程序开发　　 　手机网站制作