2天撸了一个地图标记的小程序,感谢uniapp, unicloud让开发如此高效。
主要功能是在map组件上做标记,用户点击标记可以看标记的详情,很简单,单一的小程序
了解map组件的基本使用,在地图上创造无线可能(吹牛)
各位可以看下效果.
直接上代码
1. template声明map组件
<map
:markers="poiList"
@markertap="markertap"
:scale=10
:latitude="latitude"
:longitude="longitude"
style="width: 100%;" :style="{height: windowHeight+'px'}"></map>
属性说明:
markers: 是标记点的数据,数据类型为数组,详细见下图。id, latitude,longitude, width,height,iconPath,title这几个属性是必须有值的。虽然uniapp官方文档上有的写非必填,但是不填会报错的
属性 | 说明 | 类型 | 必填 | 备注 | 平台差异说明 |
---|---|---|---|---|---|
id | 标记点id | Number | 是 | marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数 | |
latitude | 纬度 | Number | 是 | 浮点数,范围 -90 ~ 90 | |
longitude | 经度 | Number | 是 | 浮点数,范围 -180 ~ 180 | |
title | 标注点名 | String | 否 | 点击时显示,callout存在时将被忽略 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 | |
rotate | 旋转角度 | Number | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
alpha | 标注的透明度 | Number | 否 | 默认1,无透明,范围 0 ~ 1 | App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序 |
width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
height | 标注图标高度 | Number | 否 | 默认为图片实际高度 | App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序 |
callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表,可识别换行符。 | App-nvue 2.1.5+、H5、微信小程序、支付宝小程序、百度小程序、京东小程序 |
label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表,可识别换行符。 | App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序 |
anchor | 经纬度在标注图标的锚点,默认底边中点 | Object | 否 | {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 | App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序 |
clusterId | 自定义点聚合簇效果时使用 | Number | 否 | App-nvue 3.1.0+、微信小程序 | |
customCallout | 自定义气泡窗口 | Object | 否 | App-nvue 2.1.5+、微信小程序、支付宝小程序 | |
aria-label | 无障碍访问,(属性)元素的额外描述 | String | 否 | App-nvue 3.1.0+、微信小程序 | |
joinCluster | 是否参与点聚合 | Boolean | 否 | 如果指定点聚合 此选项值必须设置为true,才会生效 | App-nvue 3.1.0+、微信小程序 |
markertap:点击标记图标事件,这里传的是marker中的ID, 所以你需要将id关联其他详细数据。我这里采用的是数组下标作为marker的ID, 因为我的poiLit的item中包含了marker的信息和其他详细数据,在取值的时候用markerId作为数组索引取值很方便
scale: 是地图缩放的范围,根据自身场景调整
latitude, longitude 当前坐标经纬度就不详细说了,通过uni.getLocation获取就可以了
callout: 标记图标上的气泡
item["callout"] = {
content:item.title, display: "ALWAYS",
bgColor: "#39B54A", color: "#fff",
borderRadius: 15, padding: '10'}
标签:uniapp,nvue,map,微信,App,程序,Number,2.1
From: https://blog.csdn.net/qq_33130231/article/details/141057107