leaflet讲解:vue中使用leaflet进行地图打点marker事件（2）

原创

已于 2022-06-12 23:48:00 修改 · 6.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #Leaflet #leaflet map #定位

于 2020-07-07 21:52:25 首次发布

本文详细介绍使用Leaflet JavaScript库在地图上实现打点功能的方法。通过WMTS加载地图，自定义点图标，并实现点击地图实时更新点位置。适合初学者及需要地图交互功能的开发者。

哈喽，大家好！忍住了看小说的冲动，今天来继续为大家讲解leaflet。
今天为大家讲解的是leaflet进行打点事件！本次打点适用于任何用leaflet加载的地图，本次还继续用wmts加载的地图为大家讲解。

具体代码如下

<template>
	<div id="app">
		<div id="map" />
	</div>
</template>
<script>
	export default {
   
   
		data() {
   
   
			return {
   
   }
		},
		mounted() {
   
   
			this.leafletMap()
		},
		methods: {
   
   
			leafletMap() {
   
   

				//设置地图相关初始配置
				var leafletMap = L.map("map", {
   
   
					 center: [