7.5 地图组件

本节介绍地图组件，小程序为我们提供了地图导航功能，使用地图组件和地图位置API就可以方便快捷的实现地图定位导航。小程序可以直接使用微信内置地图，这样大大节省了设备的内存空间，使用户在不降低体验的情况下减少内存消耗。

map

map 地图，可以在界面中显示地图，最常用于LBS服务和位置导航。 map 所包含的属性，如表7-30所示：

表7-30

属性名 类型 默认值 说明
longitude Number 中心经度
latitude Number 中心纬度
scale Number 16 缩放级别，取值范围为5-18
markers Array 标记点
covers Array 即将移除，请使用 markers
polyline Array 路线
circles Array 圆
controls Array 控件
include-points Array 缩放视野以包含所有给定的坐标点
show-location Boolean 显示带有方向的当前定位点
bindmarkertap EventHandle 点击标记点时触发
bindcontroltap EventHandle 点击控件时触发
bindregionchange EventHandle 视野发生变化时触发
bindtap EventHandle 点击地图时触发

markers 标记点，用于在地图上显示标记的位置。covers 属性即将移除，请使用 markers 替代。
markers 所包含的属性，如表7-31所示：

表7-31

属性名 类型 必填 说明
id Number 否 标记点id，marker点击事件回调会返回此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 否 标注图标高度，默认为图片实际高度

polyline 指定一系列坐标点，从数组第一项连线至最后一项。
polyline 所包含的属性，如表7-32所示：

表7-32

属性名 类型 必填 说明
points Array 是 经纬度数组，[{latitude: 0, longitude: 0}]
color String 否 线的颜色，8位十六进制表示，后两位表示alpha值，如：#000000AA
width Number 否 线的宽度 ![

](/assets/图7-20 map组件示例运行效果图.png)| dottedLine | Boolean | 否 | 是否虚线，默认false |

circles 在地图上显示圆。
circles 所包含的属性，如表7-33所示：

表7-33

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

controls 在地图上显示控件，控件不随着地图移动。
controls 所包含的属性，如表7-34所示：

表7-34

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

position 位置。
position 所包含的属性，如表7-35所示：

表7-35

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

示例代码： wxml中：

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

运行效果如图7-20所示：

图7-20 map组件示例运行效果图

注意:

  • map组件是由客户端创建的原生组件，它的层级是最高的。
  • 请勿在scroll-view中使用map组件。
  • css 动画对map组件无效。

results matching ""

    No results matching ""