一些關于leaflet地圖比較基礎的知識代碼

注意map這個div寬高一定要給的，天地圖key可以去天地圖官網申請

<template><div><div id="map" style="width：1200px; height:800px "></div></div> </template> <script> //引入一些leafelt相關文件 import L from 'leaflet' import 'leaflet/dist/leaflet.css' //關鍵，不引入會錯位 import LChinaTilelayer from 'vue2-leaflet-chinatilelayer' //關鍵， require('@/utils/Leaflet.fullscreen.js') //全屏 import 'leaflet-easybutton' import 'leaflet.pm' //leafletmp插件 import 'leaflet.pm/dist/leaflet.pm.css' import axios from 'axios'methods:{initMap() {var that = thisvar p1 = [39.90553, 116.391305] //天安門var yxmap1 = L.tileLayer.chinaProvider('Google.Satellite.Map', {//衛星圖谷歌id: 'layer_tiandi',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 19})var yxmap2 = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {//衛星圖天地id: 'layer_tiandi',detectRetina: true,zIndex: 4,maxZoom: 18,minZoom: 2,key: '天地圖key'})var yxmap_group = L.layerGroup([yxmap2, yxmap1]) //衛星圖天地+谷歌創建為一個圖層組var slmap = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {//矢量圖天地id: 'layer_tiandi2',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 2,key: '天地圖key'})var bzmap = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {//標注天地id: 'layer_tiandi',detectRetina: true,zIndex: 3,maxZoom: 21,minZoom: 5,key: '天地圖key'})//衛星影像地圖，矢量地圖var baseMaps = {影像地圖: yxmap_group,矢量地圖: slmap}var ygMaps = {標注: bzmap}this.map = L.map('map', {center: p1,zoom: 9,layers: yxmap_group,zoomControl: false,attributionControl: true,dragging: true,touchZoom: true,scrollWheelZoom: true,doubleClickZoom: true,boxZoom: true,tap: true,keyboard: true,attributionControl: false // 右下角leaflet標識})L.control.layers(baseMaps, ygMaps).addTo(this.map) //右上角的切換地圖this.map.setVies(p1,12) //初始化地圖中心經緯度，縮放級別}, } </script>

leaflet位置跳轉動態效果

leafeltFly() { //fly效果this.map.flyTo([39.61103, 108.46267])},

總結

以上是生活随笔為你收集整理的Leaflet地图初始化地图（谷歌+天地图混合图层）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。