<template>
 <div>
   <div class="map" ref="map"></div>
 </div>
</template>

<script>
import "leaflet/dist/leaflet.css"
import L from 'leaflet/dist/leaflet'
import * as Esri from 'esri-leaflet'
L.esri = Esri
// icon 显示问题
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;


// 引用高亮
import "leaflet.marker.highlight/dist/leaflet.marker.highlight.css"
import "leaflet.marker.highlight"


export default {
  name: 'AddPoint',
  mounted() {
    this.initMap()
  },
  methods: {
    // 初始化Map
    initMap() {
      var map = L.map(this.$refs.map).setView([24.48, 118.108], 13);
      L.esri.basemapLayer("Streets").addTo(map)
      // Point
      L.marker([24.48,118.108], {highlight: 'temporary'}).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();

      let maker = L.marker([24.48,118.158]).addTo(map)
          .bindPopup('aaaaa')
          .openPopup();

      maker.enableTemporaryHighlight()
    }
  }
}
</script>

<style scoped>
.map {
  height: 100vh;
  width: 100%;
}
</style>