map · 小程序

地图。该组件是原生组件， **只是写了部分map小程序api，详情点击 : [微信小程序map](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)** | 属性名 | 类型 | 默认值 | 说明 | |---|---|---|---| | longitude| Number | | 中心经度（必填） | | latitude| Number | | 中心维度（必填）| | scale | Number | 16 | 缩放级别，取值范围为5-18 | | markers| Array | | 标记点 | | circles | Array | | 圆 | | controls | Array | | | | bindmarkertap | EventHandle | | 点击标记点时触发，会返回marker的id | | ... | ... | ... | ... | **markers** > 标记点用于在地图上显示标记的位置 | 属性 | 说明 | 类型 | 必填 | |---|---|---|---| | id | 标记点id（marker点击事件回调会返回此id） | Number |否| | latitude | 纬度（范围 -90 ~ 90） | Number | 是 | | longitude | 经度（范围 -180 ~ 180） | Number | 是 | | title | 标注点名 | String | 否 | | iconPath | 显示的图标 | String | 是 | | callout | 自定义标记点上方的气泡窗口 | Object | 否| | label | 为标记点旁边增加标签 | Object | 否 | | ... | ...| ...| ...| **marker 上的气泡 callout** | 属性 | 说明 | 类型 | |---|---|---| | content | 文本 | String | | color | 文本颜色| String| | fontsize| 文字大小| Number| | borderRadius| 边框圆角| Number | |... | ...| ...| **marker 上的气泡 label** | 属性 | 说明 | 类型 | |---|---|---| | content | 文本 | String | | color | 文本颜色| String| | fontsize| 文字大小| Number| |... | ...| ...| **circles** > 在地图上显示圆 | 属性 | 说明 | 类型 | 必填 | |---|---|---|---| | latitude | 纬度（范围 -90 ~ 90） | Number | 是 | | longitude | 经度（范围 -180 ~ 180） | Number | 是 | | color | 描边的颜色 | String | 否 | | fillColor | 填充颜色 | String | 否 | | radius | 半径 | Number | 是 | | strokeWidth | 描边的宽度 | Number | 否 | **controls** > 在地图上显示控件，控件不随着地图移动 | 属性 | 说明 | 类型 | 必填 | |---|---|---|---| | id| 控件id（在控件点击事件回调会返回此id） | Number |否 | | position | 控件在地图的位置 | Object | 是 | | iconPath| 显示的图标（项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径） | String | 是 | | clickable | 是否可点击 | Boolean | 否| **controlsl上的position** | 属性 | 说明 | 类型 | 必填 | |---|---|---|---| | left| 距离地图的左边界多远| Number | 否 | | top | 距离地图的上边界多远 | | 否| | width | 控件宽度 | Number| 否| | height|控件高度 | Number | 否| **地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。** **地图实例：** 创建页面"pages/map/map" ~~~  <map id="map" markers="{{markers}}" longitude="{{longitude}}" latitude="{{latitude}}" scale="25" circles="{{circles}}" show-location="{{true}}" bindmarkertap="marker"></map> ~~~ ~~~ // pages/map/map.js Page({ /** * 页面的初始数据 */ data: { latitude: 30.689160, longitude: 114.372640, circles: [{ latitude: 30.689160, longitude: 114.372640, fillColor: "#8DE25055", radius: 300 }], markers: [{ iconPath: "/images/icon/map.png", latitude: 30.689160, longitude: 114.372640, width: 30, height: 30, title: "黑科技", id: 0, label: { content: "湖北大学知行学院", color: "#EE5E7B", borderWidth: 1, borderColor: "#EE5E78", borderRadius: 5, padding: 5, }, callout: { content: "欢迎来到湖北大学知行学院", color: "#EE5E7B", borderWidth: 1, borderColor: "#EE5E78", borderRadius: 5, padding: 5, } }], }, marker() { } }) ~~~