SOURCE

console 命令行工具 X clear

                    
>
console
var { LMap, LTileLayer, LMarker, LPopup, LGeoJson } = Vue2Leaflet;

let campus = {
    'type': 'Feature',
    'properties': {http://jsrun.pro/YubKp/edit#
        'popupContent': 'This is the Auraria West Campus',
        'style': {
            weight: 2,
            color: '#999',
            opacity: 1,
            fillColor: '#B0DE5C',
            fillOpacity: 0.8
        }
    },
    'geometry': {
        'type': 'MultiPolygon',
        'coordinates': [
            [
                [
                    [-105.00432014465332, 39.74732195489861],
                    [-105.00715255737305, 39.74620006835170],
                    [-105.00921249389647, 39.74468219277038],
                    [-105.01067161560059, 39.74362625960105],
                    [-105.01195907592773, 39.74290029616054],
                    [-105.00989913940431, 39.74078835902781],
                    [-105.00758171081543, 39.74059036160317],
                    [-105.00346183776855, 39.74059036160317],
                    [-105.00097274780272, 39.74059036160317],
                    [-105.00062942504881, 39.74072235994946],
                    [-105.00020027160645, 39.74191033368865],
                    [-105.00071525573731, 39.74276830198601],
                    [-105.00097274780272, 39.74369225589818],
                    [-105.00097274780272, 39.74461619742136],
                    [-105.00123023986816, 39.74534214278395],
                    [-105.00183105468751, 39.74613407445653],
                    [-105.00432014465332, 39.74732195489861]
                ], [
                    [-105.00361204147337, 39.74354376414072],
                    [-105.00301122665405, 39.74278480127163],
                    [-105.00221729278564, 39.74316428375108],
                    [-105.00283956527711, 39.74390674342741],
                    [-105.00361204147337, 39.74354376414072]
                ]
            ], [
                [
                    [-105.00942707061768, 39.73989736613708],
                    [-105.00942707061768, 39.73910536278566],
                    [-105.00685214996338, 39.73923736397631],
                    [-105.00384807586671, 39.73910536278566],
                    [-105.00174522399902, 39.73903936209552],
                    [-105.00041484832764, 39.73910536278566],
                    [-105.00041484832764, 39.73979836621592],
                    [-105.00535011291504, 39.73986436617916],
                    [-105.00942707061768, 39.73989736613708]
                ]
            ]
        ]
    }
};



new Vue({
    el: '#app',
    components: { LMap, LTileLayer, LMarker, LPopup, LGeoJson },
    computed: {
        brigadeIcon: {
            get() {
                return L.divIcon({
                    iconUrl: this.iconUrl.brigade,
                    className: 'map-marker brigade',
                    html: `<div class="brigade map icon"><img src="${this.iconUrl.brigade}"></div>`
                });
            }
        }
    },
    data() {
        return {
            zoom: 14,
            center: [39.74310, -104.9999],
            //center: L.latLng(47.413220, -1.219482),
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            marker: L.latLng(47.413220, -1.219482),
            marker2:[39.74310, -104.9999],
            iconUrl: {
                brigade: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png'
            },
            coors: {
                geojson: campus,
                options: {
                    pointToLayer: function (feature, latlng) {
                        return L.marker(latlng, { icon: baseballIcon });
                    },
                    onEachFeature: this.onEachFeature
                }
            }
        }
    },
    mounted() {
        //console.log("--22--")
        let map = this.$refs.map.mapObject;
        console.log(L)
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);
        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);
        map.on('draw:editstop', function (e) {
          console.log('draw:editstop=',e);
          //var layers = e.layers;
          //_this.isRegionEdit =true;
        })
        map.on('draw:created', function (e) {
            console.log(e)
            var type = e.layerType,
            layer = e.layer;
            if (type === 'marker') {
                // Do marker specific actions
            }
            // Do whatever else you need to. (save to db; add to map etc)
            map.addLayer(layer);
            console.log(e.layer.getLatLngs())
        });

        map.on('draw:edited', function (e) {
            var layers = e.layers;
            var content = null;
            layers.eachLayer(function (layer) {
                //do whatever you want; most likely save back to db
                content = getPopupContent(layer);
                if (content !== null) {
                    layer.setPopupContent(content);
                }
            });
        });
    },
    methods: {
        onEachFeature(feature, layer) {
            let layerContent = feature.properties.popupContent;
            layer.bindPopup(layerContent);
        }
    }
    
});
<div id="app">
  <!-- <h1>地图</h1> -->
  <div class="map">
    <l-map ref="map" :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-marker :lat-lng="marker2" :draggable="false" :icon="brigadeIcon">
        <l-popup content="item.name"/>
      </l-marker>
      <l-geo-json
        :geojson="coors.geojson"
        :options="coors.options"
      />
    </l-map>
  </div>
</div>
.map{width:100%;height:500px;}