index.html中引入天地圖api
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
map.vue中初始化天地圖
//初始化天地圖
initTMap() {const T = window.T;// 3.初始化地圖對象this.tMap = new T.Map("containerT", {});// 4.設置顯示地圖的中心點和級別this.tMap.centerAndZoom(new T.LngLat(116.397590, 39.908776), 13);// 5.創建地圖類型控件const ctrl = new T.Control.MapType([{title: '地圖',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地圖控件上所要顯示的圖層圖標(默認圖標大小80x80)layer: window.TMAP_NORMAL_MAP}, {title: '衛星',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',layer: window.TMAP_SATELLITE_MAP}]);// 6.將控件添加到地圖,一個控件實例只能向地圖中添加一次。this.tMap.addControl(ctrl);// 7.創建坐標,通常是調取接口獲得經緯度const point = new T.LngLat(116.397590, 39.908776);// 8.創建覆蓋使用的圖標const icon = new T.Icon({iconUrl: '../marker-red.png',iconSize: new T.Point(27, 27),iconAnchor: new T.Point(10, 25)});// 9. 創建在該坐標上的一個圖像標注實例const marker = new T.Marker(point, icon);// 10.將覆蓋物添加到地圖中,一個覆蓋物實例只能向地圖中添加一次this.tMap.addOverLay(marker);
}
出現問題:
解決方法:
直接用延遲包裹即可
setTimeout(()=>{初始化地圖代碼
},1500) //延遲多久隨你調
如下:
最好加個element-ui的loading加載的時候好看點
//初始化天地圖
initTMap() {setTimeout(()=>{const T = window.T;// 3.初始化地圖對象this.tMap = new T.Map("containerT", {});// 4.設置顯示地圖的中心點和級別this.tMap.centerAndZoom(new T.LngLat(116.397590, 39.908776), 13);// 5.創建地圖類型控件const ctrl = new T.Control.MapType([{title: '地圖',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地圖控件上所要顯示的圖層圖標(默認圖標大小80x80)layer: window.TMAP_NORMAL_MAP}, {title: '衛星',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',layer: window.TMAP_SATELLITE_MAP}]);// 6.將控件添加到地圖,一個控件實例只能向地圖中添加一次。this.tMap.addControl(ctrl);// 7.創建坐標,通常是調取接口獲得經緯度const point = new T.LngLat(116.397590, 39.908776);// 8.創建覆蓋使用的圖標const icon = new T.Icon({iconUrl: '../marker-red.png',iconSize: new T.Point(27, 27),iconAnchor: new T.Point(10, 25)});// 9. 創建在該坐標上的一個圖像標注實例const marker = new T.Marker(point, icon);// 10.將覆蓋物添加到地圖中,一個覆蓋物實例只能向地圖中添加一次this.tMap.addOverLay(marker);this.tMap.checkResize()},1500)
}
已解決