uniapp小程序地图添加删除标记点

在地图上添加自定义的点位方法

首先需要绑定一个makers值,

<map id="map" enable-traffic='true' enable-rotate='true' enable-3D='true'  :latitude="location.latitude" :longitude="location.longitude" :markers="covers" scale="16"  bindregionchange="onRegionChange"
				show-compass='true' show-location="true">
</map>

然后给covers赋值就好了

                let _this = this
				let n = l.map(Number)
				let obj = { 
					id: id,  //这个maker的id
					latitude: n[1], //纬度
					longitude: n[0], //精度
					iconPath: url,  //图标地址
					width: 20, //宽
					height: 20, //高
					title:lable,//标题,
					/* callout: { //标记头上的气泡
						content: lable,  //内容
						display: 'BYCLICK', //点击显示  ALWAYS,常显
						bgColor: '#E3E3E3',
						padding: 10,
						borderRadius: 5, //边角
						borderWidth: 2, //边框宽度
						anchorX: 12, //横向偏移量,向右为正数
						anchorY: 1//	纵向偏移量,向下为正数
					}, */
					//joinCluster: true  //点聚合
				}
				_this.covers.push(obj)

删除标记时方法如下:

首先获取地图的上下文,然后地图对象中有删除maker的方法,以id为索引。id是个数组,可以一次写多个。我的因为是固定值所以就直接写死了

let mapContext = uni.createMapContext("map", this);
				mapContext.removeMarkers({
					markerIds:[1,2,3,5,4,6,7,8,9,10,11,12],
					success: function(res) {
						console.log('删除成功');
					  },
				})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp小程序地图导航是一种基于uniapp框架开发的小程序功能,用于在小程序中实现地图导航的功能。 通过uniapp小程序地图导航,用户可以根据自己的需求选择起和终位置,然后在地图界面上展示出最佳的路径规划,并提供导航功能指引用户前往目的地。 uniapp小程序地图导航功能的实现需要借助地图API,一般选择常用的地图服务商,如百度地图、高德地图、腾讯地图等。 在实现地图导航功能时,首先需要在小程序的页面中引入地图组件,然后获取用户当前位置,并将其显示在地图上。接着,用户可以通过选择地、输入地址等方式确定起和终位置。在用户确定起终之后,调用相应的地图API来进行路径规划,并将规划结果展示在地图上。 除了展示路径规划,uniapp小程序地图导航还可以提供导航指引。导航指引可以包括语音播报、图像显示等方式,帮助用户按照规划路径前往目的地。 uniapp小程序地图导航还可以提供一些辅助功能,如周边搜索、路线规划查询等功能,方便用户更好地掌握自己的出行情况。 总之,uniapp小程序地图导航是一种非常实用的小程序功能,可以帮助用户在小程序中方便地实现地图导航,规划路径,并提供导航指引,提升用户的出行体验。它的实现需要借助地图API,并结合uniapp框架进行开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值