安装leaflet
npm i leaflet
全局引用(main.js)
import L from "leaflet";
import "leaflet/dist/leaflet.css";
vue页面初始化使用
<template> <div id="container"></div> </template> <script> export default { data() { return { map: null, }; }, mounted() { const a = this; a.initMap(); }, methods: { initMap() { let map = L.map("container", { minZoom: 3, maxZoom: 14, center: [33.550339, 113.114129], zoom: 12, zoomControl: false, attributionControl: false, // crs: L.CRS.EPSG3857, }); this.map = map; window.map = map; L.tileLayer( "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}" ).addTo(map); }, }, }; </script> <style scoped> #container { width: 100%; height: 100%; } </style>