uniapp地图-点击添加标记点

迈不过友情╰ 2021-08-19 13:27 3057阅读 0赞

前言：这篇文章讲述的是map标签的@tap点击地图事件;添加的标记点都是保存在markers数组里面,点击地图就会获取点击的位置的经纬度，然后在point里面追加了iconPath标记点的图标，之后使用了concat将点击地图的对象添加到markers数组里面就完成了点击地图显示标记点了。

--------------------

[uniapp地图-删除标记点][uniapp_-]  
[uniapp地图-标记点-多点连线][uniapp_-_-]

--------------------

具体的也可以看看官网的介绍：[https://uniapp.dcloud.io/component/map?id=map][https_uniapp.dcloud.io_component_map_id_map]

--------------------

## **最终效果-gif图片：**   ![在这里插入图片描述][20200105102244521.gif] ##

<template>
    	<view>
    		<view style="width: 100%;height: 100%;position: absolute;left: 0;tab-size: 0;">
    			<map :id="maps" :markers="markers" style="width: 100%;height: 100%;" @tap="tapMap"></map> </view> </view> </template> <script> export default { 
    		data() { 
    			return { 
    				maps: 1,
    				markers: []
    			}
    		}, methods: { 
    			tapMap(e) { 
    				var that = this;
    				var id = e.currentTarget.id;
    				var maps = uni.createMapContext(id, this).$getAppMap(); maps.onclick = function(point) { 
    					console.log(point);
    					
    					point.iconPath = '/static/btn_loc0.png';
    					that.markers = that.markers.concat(point); uni.showToast({ 
    						title: '添加成功',
    						icon: 'none'
    					});
    				};
    			}
    		}
    	}
    </script>
    
    <style>
    
    </style>

[uniapp_-]: https://blog.csdn.net/qq_34227291/article/details/103791125
[uniapp_-_-]: https://blog.csdn.net/qq_34227291/article/details/102884966
[https_uniapp.dcloud.io_component_map_id_map]: https://uniapp.dcloud.io/component/map?id=map
[20200105102244521.gif]: /images/20210724/a2d4ac9cd7ab4574a97525f5419220c1.png