leaflet简介：曾用名 MarsGIS for Leaflet 是火星科技研发的web地图开发平台系统
中文文档：http://leaflet.marsgis.cn/
下面代码需求：在地图上添加四种类型的商店，不同类型的商店在地图上的图标不同，通过点击图标显示弹窗（内容商店的名称）通过点击弹窗名称跳转到此商店详情。

技术点：1.改变leaflet默认的图标，通过后台判断显示四种不同的图标
2.this.getPopup().getElement()先获取popup这个弹窗，再获取弹窗里面的dom结构
<template>
<div id="map" ref="map">

</div>
</template>
<script>
import L from 'leaflet';
import markIcon from '../assets/lan.png'
export default {
data(){
return{
map:'',
latlng:[]
}
},
mounted () {
this.initMap();
},
methods: {
initMap() {
let map = L.map("map", {
center : [ 22.759777, 114.050179 ],
zoom : 11,
zoomControl : false,
maxZoom : 18,
attributionControl : false,
// layers : [ arcgis_streets ]
});
this.map = map;　　　　//data上需要挂载
window.map = map;

        let tileLayer = L.tileLayer(
            "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
        ).addTo(map);
        var greenIcon = L.icon({
            iconUrl: markIcon,
            // shadowUrl: 'leaf-shadow.png',

            iconSize:     [25, 25],    //  图标的大小    
            // shadowSize:   [41, 41], //  影子的大小
            // iconAnchor:   [16, 52],  
            //shadowAnchor: [4, 62],  // 相同的影子
            // popupAnchor:  [1, -38] // 
        });
        // 循环多个marker
        this.latlng = [
            {lat:23.140833,lng:113.305649,id:'a',status:1},
            {lat:39.550339,lng:116.114129,id:'b',status:2},
            // {lat:23.138535,lng:113.305821,id:'c'}
        ] 
        var latlng= [
            {lat:23.140833,lng:113.305649,id:'a',status:1},
            {lat:39.550339,lng:116.114129,id:'b',status:2},
            // {lat:23.138535,lng:113.305821,id:'c'}
        ] 
        var _this = this;
        for (let i = 0; i < latlng.length; i++) {
            var lat = latlng[i].lat
            var lng = latlng[i].lng
            var id = latlng[i].id
            console.log(latlng[i].status);
            if(latlng[i].status == 1){
                var myIcon = L.icon({
                    iconUrl: require('../assets/huang.png'),  // jpg png gif都可以
                    iconSize: [25, 38]
                });
            }else{
                var myIcon = L.icon({
                    iconUrl: require('../assets/lan.png'),  // jpg png gif都可以
                    iconSize: [25, 38]
                });
            }
            var popup = L.popup()
            popup.setContent("<div class='pop'>我是第"+id+"个marker</div>")
            var marker = L.marker([lat, lng],{
                icon:myIcon,
            }).addTo(map)
            .bindPopup(popup)

            
            
            marker.on('popupopen',function(){
                console.log('popupopen',this.getPopup().getContent())
                console.log('popupopen',this.getPopup().getElement())
                this.getPopup().getElement().onclick= function(){
                    _this.fun();
                }
            })
            
        }
    },
    fun(){
        this.$router.push('enterpriseDetail');
    }
}

}
</script>
<style lang="scss" scoped>
@import "~leaflet/dist/leaflet.css";

map{

width:100%;
height: 100vh;

}
</style>

使用vue2 leaflet组件实现的Dome
<template>
<l-map style="height: 100vh" :zoom="zoom" :minZoom="minZoom" :maxZoom="maxZoom" :center="center">
<l-tile-layer :url="url">

    </l-tile-layer>
     <!-- <l-marker :Icon= "icon" :lat-lng="latLng" >
        <l-popup><div @click="fun">{{zoom}}</div></l-popup>
    </l-marker> -->
    <div v-for="star in stars" :key="star.name">
    <l-marker :Icon="redIcon" :lat-lng="star.latLng" >
        <l-popup><div @click="fun">{{star.name}}</div></l-popup>
    </l-marker>
    </div>
</l-map>

</template>
<script>
import {LMap, LImageOverlay, LMarker, LPopup,LTileLayer} from 'vue2-leaflet';
import { mapState } from "vuex";
import { Icon } from 'leaflet';

export default {

data(){
    return{
        zoom: 8,
        minZoom:3,
        maxZoom:14,
        center: [39.550339, 116.114129],
        url: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        bounds: [[-26.5, -25], [1021.5, 1023]],
        latLng:[39.550339,116.114129],
        crs: L.CRS.Simple,
        redIcon:"",
        redIcon1:"",
        redIcon2:"",
        redIcon3:"",
        orangeIcon:''
        // stars: [
            // { name: 'Sol', lng: 39.550339, lat: 116.114129,latLng:[39.550339,116.114129],pic:"require('../assets/huang.png')"},
            // { name: 'Mizar', lng: 41.6, lat: 130.1,latLng:[41.6,130.1],pic:"require('../assets/hui.png')" },
            // { name: 'Krueger-Z', lng: 13.4, lat: 56.5,latLng:[13.4,56.5],pic:"require('../assets/hong.png')" },
            // { name: 'Deneb', lng: 218.7, lat: 8.3 ,latLng:[218.7, 8.3],pic:"require('../assets/lan.png')"}
        // ],
        // icon: L.icon({
        //     iconUrl: '../assets/hong.png',
        //     iconSize: [32, 37],
        //     iconAnchor: [16, 37]
        // }),
    }
},
computed:{
    ...mapState({
        stars:state => state.stars,
        // redIcon:state => state.redIcon
    })
    
},
components:{
    LMap,
    LImageOverlay,
    LMarker,
    LTileLayer,
    LPopup
},
mounted () {
    this.map();
},
methods: {
    fun(){
        this.$router.push("enterpriseDetail")
    },
    map(){
          Icon.Default.mergeOptions({
              iconRetinaUrl: require('../assets/huang.png')
               iconUrl: require('./assets/huang.png'),
               shadowUrl: require('./assets/hong.png'),
       });
      }

}