leaflet講解:vue中使用leaflet進行地圖點标标注事件（3）

哈喽大家好，三天打魚2天曬網的我又回來了。下面給大家講解的是對背景傳回的經緯度進行點标注操作。廢話不多說直接上代碼.本人微信wyk1364630428，承接微信小程式開發，背景官網web開發歡迎合作。

<template>
	<div id="app">
		<div id="map" />
	</div>
</template>
<script>
	export default {
		data() {
			return {
				markes:[30.228742, 120.11787]//模拟背景資料
			}
		},
		mounted() {
			this.leafletMap()
		},
		methods: {
			leafletMap() {
				var than=this//改變this指向
				//設定地圖相關初始配置
				var leafletMap = L.map("map", {
					 center: [30.279751,119.727856],// 設定地圖中心點
					zoom: 1, //設定目前地圖顯示的縮放等級
					crs: L.CRS.EPSG4326 //設定坐标系4326
				})

				//設定地圖可以進行0-22的等級縮放
				var matrixIds = [];
				for (var i = 0; i < 22; ++i) {
					matrixIds[i] = {
						identifier: "" + i,
						topLeftCorner: new L.LatLng(90, -180)
					};
				}

				//設定地圖wmts瓦片地圖加載配置
				var urlMap= 'http://192.168.11.25:6080/arcgis/rest/services/WMTS'//瓦片地圖位址
				var wmtsOptionsMap = {
					layer: 'hangzhou:MapServer',//瓦片地圖名稱
					tileSize: 256, //切片大小
					format: "image/png",//瓦片圖格式
					matrixIds: matrixIds,//可縮放
				}
				var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap)
				leafletMap.addLayer(wmtsMap)
				
				//設定ICON相關配置
				var Icon = L.divIcon({ 
				  className: 'my-div-icon',//自定義icon css樣式
				  iconSize: [15, 15]//點大小
				})
				

						//添加點到地圖中
					  L.marker(than.markes, {
           				 icon: Icon,
        			  }).addTo(leafletMap).bindPopup('嗨，我是點标注，我在這裡')
 				   .openPopup()
         			 
				}）
			}
		}
	}
</script>
<style>
	#map {
		width: 100%;
		height: 100vh;
	}
		.my-div-icon{
		width: 15px;
		height: 15px;
		background-color: red;
		border-radius: 50%;
	}
</style>

           

下面是效果圖