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文件:

<template>
  <div class="mapBox">
    <div>在vue2中使用leaflet标记点</div>
    <!-- 地图容器 -->
    <div id="map"></div>
  </div>
</template>

<script>
  import defaultMark from '@/assets/mark.png'
  export default {
    name: 'LeafletMap',
    data() {
      return {
        map: null,
        defaultMark
      }
    },
    mounted() {
      // 地图初始化
      this.initMap()
    },
    methods: {
      // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
      initMap() {
        let map = L.map("map", {
          center: [24.485666, 118.095498], // 中心位置
          zoom: 12, // 缩放等级
          attributionControl: true, // 版权控件
          zoomControl: true //缩放控件
        });
      
        this.map = map; // data上需要挂载
        this.map.on('click', i =>{
          // 点击获取地图上的经纬度
          console.log(i.latlng)
        })
        L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map) // 加载底图

        L.marker([24.485666, 118.12], {
          icon: new L.Icon({
            className: "lmap-icon",
            iconUrl:require('../assets/redMark.png'),
            iconSize: [24, 24],
            iconAnchor: [16, 16],
          })
        }).addTo(this.map);

        let DefaultIcon1 = L.icon({
          iconUrl: this.icoName,
             // shadowUrl: iconShadow,
          iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
          shadowSize: [41,41], //  影子的大小    【值1，值2】 为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41
          iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
          shadowAnchor: [4, 62], // 相同的影子
          popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
        })
        
        let markers1 = L.marker([24.485666, 118.095498], {
          icon: DefaultIcon1,
        }).addTo(this.map)
        
        let DefaultIcon2 = L.divIcon({
          className: "lmap-icon",
          html: `<div><span class="lmap-span">标3</span><img class="lmap-image" src="${this.defaultMark}"/></div>`,// shadowUrl: iconShadow,
          iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
          shadowSize: [41,41], //  影子的大小    【值1，值2】 为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41
          iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
          shadowAnchor: [4, 62], // 相同的影子
          popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
        })
        
        let markers2 = L.marker([24.52, 118.095], {
          icon: DefaultIcon2,
        }).addTo(this.map)
      }
    }
  }
</script>
<style scoped>
  #map {
    width: 800px;
    height: 500px;
    margin: 50px auto;
  }

  .lmap-image {
    width: 32px;
    height: 32px;
  }

  .lmap-span {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
  }

  .lmap-text {
    display: inline-block;
    margin-left: 5px;
    padding: 5px;
    font-weight: bold;
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    width: 500px;
    white-space: nowrap;
    position: absolute;
    text-align: center;
    top: 25px;
    left: -250px;
  }
</style>

效果如下图:

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

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