微信小程序地图 map

2020-07-22 15:28 更新

微信小程序map

地图。

属性名类型默认值说明最低版本
longitudeNumber 中心经度 
latitudeNumber 中心纬度 
scaleNumber16缩放级别,取值范围为5-18 
markersArray 标记点 
coversArray 即将移除,请使用 markers 
polylineArray 路线 
circlesArray  
controlsArray 控件 
include-pointsArray 缩放视野以包含所有给定的坐标点 
show-locationBoolean 显示带有方向的当前定位点 
bindmarkertapEventHandle 点击标记点时触发 
bindcallouttapEventHandle 点击标记点对应的气泡时触发1.2.0
bindcontroltapEventHandle 点击控件时触发 
bindregionchangeEventHandle 视野发生变化时触发 
bindtapEventHandle 点击地图时触发 
注意: covers 属性即将移除,请使用 markers 替代

markers

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

属性说明类型必填备注最低版本
id标记点idNumbermarker点击事件回调会返回此id 
latitude纬度Number浮点数,范围 -90 ~ 90 
longitude经度Number浮点数,范围 -180 ~ 180 
title标注点名String  
iconPath显示的图标String项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 
rotate旋转角度Number顺时针旋转的角度,范围 0 ~ 360,默认为 0 
alpha标注的透明度Number默认1,无透明 
width标注图标宽度Number默认为图片实际宽度 
height标注图标高度Number默认为图片实际高度 
callout自定义标记点上方的气泡窗口Object{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}1.2.0
label为标记点旁边增加标签Object{color, fontSize, content, x, y},可识别换行符,x,y原点是marker对应的经纬度1.2.0
anchor经纬度在标注图标的锚点,默认底边中点Object{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点1.2.0

marker 上的气泡 callout

属性说明类型
content文本String
color文本颜色String
fontSize文字大小Number
borderRadiuscallout边框圆角Number
bgColor背景色String
padding文本边缘留白Number
display'BYCLICK':点击显示; 'ALWAYS':常显String

polyline

指定一系列坐标点,从数组第一项连线至最后一项

属性说明类型必填备注最低版本
points经纬度数组Array[{latitude: 0, longitude: 0}] 
color线的颜色String8位十六进制表示,后两位表示alpha值,如:#000000AA 
width线的宽度Number  
dottedLine是否虚线Boolean默认false 
arrowLine带箭头的线Boolean默认false,开发者工具暂不支持该属性1.2.0
borderColor线的边框颜色String 1.2.0
borderWidth线的厚度Number 1.2.0

circles

在地图上显示圆

属性说明类型必填备注
latitude纬度Number浮点数,范围 -90 ~ 90
longitude经度Number浮点数,范围 -180 ~ 180
color描边的颜色String8位十六进制表示,后两位表示alpha值,如:#000000AA
fillColor填充颜色String8位十六进制表示,后两位表示alpha值,如:#000000AA
radius半径Number 
strokeWidth描边的宽度Number 

controls

在地图上显示控件,控件不随着地图移动

属性说明类型必填备注
id控件idNumber在控件点击事件回调会返回此id
position控件在地图的位置Object控件相对地图位置
iconPath显示的图标String项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径
clickable是否可点击Boolean默认不可点击

position

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

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

示例:

<!-- 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.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

Bug & Tip

  1. tip:map组件是由客户端创建的原生组件,它的层级是最高的。
  2. tip: 请勿在scroll-view中使用map组件。
  3. tip:css动画对map组件无效。
  4. tip:map组件使用的经纬度是火星坐标系,调用wx.getLocation接口需要指定typegcj02

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号