leaflet在vue中标记点(marker)的三种方式

在地图标记点,或者点击某处获取经纬度在地图操作中是必须的,整理了一下,三种方式进行使用:

main.js文件:

import Vue from 'vue'
import App from './App.vue'

import L from "leaflet"
import "leaflet/dist/leaflet.css"
import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
import iconShadow from "leaflet/dist/images/marker-shadow.png" // 引入leaflet默认图标
Vue.prototype.icoName = icon
Vue.prototype.iconShadowName = iconShadow

Vue.use(L)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

vue文件:

效果如下图:

标记需要文字标示的也可以在点击标记的时候用popup弹窗,也可以用DivIcon,第一种是在main.js页面引入框架的默认图标.看文档是不需要引入.第二种引入自己准备的图标图片第三种用了DivIcon,要是海量的标记也可以用Canvas-Markers插件,

demo代码地址:https://gitee.com/yuexiayunsheng/leaflet-map