vue 引入 leaflet1.4.0

安裝leaflet

npm install leaflet --save

// 在main.js 中設置如下

//引入樣式文件
import 'leaflet/dist/leaflet.css'

 

<template>
  <div id="map"> </div>
</template>

<script>
import * as L from 'leaflet' 
//Vue.L = Vue.prototype.$L = L  

var map;
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    map = L.map('map',{
      center: [31.87, 120.55],
      zoom: 13
    });
    L.tileLayer(
      "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
      {
        subdomains: ["1", "2", "3", "4"],
        attribution: "高德"
      }
    ).addTo(map);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
  width: 100%;
  height: calc(100vh);
}
</style>