安装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>
原文:https://www.cnblogs.com/yingyigongzi/p/10810110.html