map地图

组件说明:

本节主要讲述小程序组件map标签的用法及其属性。

组件用法：

wxml

<view>
    <map longitude="112.61" latitude="26.89" markers="{{markers}}" covers="{{covers}}"></map>
</view>

js

Page({
  data:{
    markers: [{
      latitude: 26.89,
      longitude: 112.61,
      scale: 24,
      name: '微信小程序社区',
      desc: '我在这里'
    }],
    covers: [{
      latitude: 26.89,
      longitude: 112.61,
      iconPath: '../images/car.png',
      rotate: 10
    }]
  }
})

wxss

map {
     width: 700rpx; 
     height: 600rpx;
     margin: 0 auto;
}

主要属性：

map标签

属性名称	数据类型	描述	默认值	必填
longitude	Number	标签中心经度		是
latitude	Number	标签中心纬度		是
scale	Number	缩放比例	16	否
markers	Array	标记点		是
covers	Array	覆盖物		是

markers属性

属性值	数据类型	描述	必填	备注
longitude	Number	标记点经度	是	浮点数，范围 -90 ~ 90
latitude	Number	标记点纬度	是	浮点数，范围 -180 ~ 180
name	String	标记点名称	是
desc	String	标记点描述	否

covers属性

属性值	数据类型	描述	必填	备注
longitude	Number	经度	是	浮点数，范围 -90 ~ 90
latitude	Number	纬度	是	浮点数，范围 -180 ~ 180
iconPath	String	覆盖物图标	是	项目目录下的图片路径，支持相对路径写法
rotate	String	旋转角度	否	顺时针旋转的角度，范围 0 ~ 360，默认为 0

注：

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。标记点markers只能在初始化的时候设置，不支持动态更新；
请勿在 <scroll-view/> 中使用map标签；
标记点用于在地图上显示标记的位置，不能自定义图标和样式；
覆盖物用于在地图上显示自定义图标，可自定义图标和样式。

如有技术问题或对本文有反馈，请加入QQ群：
微信小程序实战5营：