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