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

Clc7

已于 2023-05-16 10:42:48 修改

阅读量1.5k

点赞数

文章标签： uni-app

于 2023-05-16 10:42:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_64132598/article/details/130700311

版权

文章讲述了在地图上添加自定义点位的方法，包括设置markers属性，指定经纬度、图标及气泡内容。同时，也介绍了删除标记的步骤，通过地图上下文的removeMarkers方法按id删除多个标记。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先需要绑定一个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('删除成功');
					  },
				})