vue 引入 leaflet1.4.0
安装leaflet
cnpm install leaflet@~1.4.0 --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>