uniapp地圖-點擊添加標記點

前言：這篇文章講述的是map標籤的@tap點擊地圖事件;添加的標記點都是保存在markers數組裏面,點擊地圖就會獲取點擊的位置的經緯度，然後在point裏面追加了iconPath標記點的圖標，之後使用了concat將點擊地圖的對象添加到markers數組裏面就完成了點擊地圖顯示標記點了。

---

uniapp地圖-刪除標記點
uniapp地圖-標記點-多點連線

---

具體的也可以看看官網的介紹：https://uniapp.dcloud.io/component/map?id=map

---

最終效果-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>