leaflet加载高德地图示例源代码

/* * @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN） * @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: [email protected] * @First published in xiaozhuanlan.com * @Second published in CSDN * @First published time: 2022-09-08 */ <template> <div class="container"> <h3>vue+leaflet: 加载高德地图（多种形式）</h3> <p>大剑师兰特, 还是大剑师兰特</p> <h4> <el-button type="primary" size="mini" @click='gaode("https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8<ype=11")'>高德路网图 </el-button> <el-button type="primary" size="mini" @click='gaode("https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}")'>高德影像图 </el-button> <el-button type="primary" size="mini" @click='gaode("http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}")'>高德矢量图</el-button> <el-button type="danger" size="mini" @click='clearAlllayers()'>清除图层</el-button> </h4> <div id="vue-leaflet"></div> </div> </template> <script> export default { name: 'LeafletMap', data() { return { map: null } }, mounted() { this.initMap() }, methods: { clearAlllayers(){ this.map.eachLayer((layer)=>{ this.map.removeLayer(layer); }); }, gaode(url){ L.tileLayer( url, { maxZoom: 19, } ).addTo(this.map) }, initMap() { this.map = L.map("vue-leaflet", { center: [39.90562, 116.38840], // 中心位置 先纬度后经度 zoom: 8, // 缩放等级 attributionControl: true, // 版权控件 zoomControl: true //缩放控件 }); } } } </script> <style scoped> .container { width: 840px; height: 600px; margin: 50px auto; border: 1px solid #42B983; } #vue-leaflet { width: 800px; height: 430px; margin: 0 auto; border: 1px solid #42B983; position: relative; } </style>