Vue項目引入天地圖
在vue的靜態(tài)資源目錄下的index.html中引入天地圖的底圖，開發(fā)天地圖源碼路徑：天地圖API
方法一：加載天地圖，引用：public/index.html
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申請的key"></script>
方法二：下載4.0天地圖js，使用本地js文件實現(xiàn)天地圖，加快天地圖繪畫和解決天地圖加載卡頓(不做演示)
實現(xiàn)天地圖效果，注釋引用：public/index.html下的天地圖
js文件目錄放：components/tianditu/tianditu.api.js
實現(xiàn)天地圖頁面，導入天地圖js，下載路徑：tianditu.js天地圖本地緩存4.0下載_js天地圖,天地圖js文件-Javascript文檔類資源-CSDN下載
一、介紹：天地圖JavaScript API 4.0是一套符合HTML5.0規(guī)范的的應用程序接口，以HTML 5.0的形式提供各種地圖服務和數(shù)據(jù)，如地圖展示、標注、定位等。為開發(fā)者提供了快速調用天地圖在線地理信息服務的通道，包括快速創(chuàng)建地圖、調用地圖、地名搜索以及在地圖上添加覆蓋物等。支持PC端和移動端基于瀏覽器的地圖應用開發(fā)，支持主流的HTML4.0和HTML5.0特性的地圖開發(fā)。
二、實現(xiàn)步驟：
- 創(chuàng)建地圖容器元素；
- 引入天地圖,tk：在官網申請；
- 初始化地圖對象；
- 設置顯示地圖的中心點和級別；
- 創(chuàng)建地圖類型控件；
- 將控件添加到地圖，一個控件實例只能向地圖中添加一次；
- 創(chuàng)建坐標，通常是調取接口獲得經緯度；
- 創(chuàng)建覆蓋使用的圖標；
- 創(chuàng)建在該坐標上的一個圖像標注實例；
- 將覆蓋物添加到地圖中，一個覆蓋物實例只能向地圖中添加一次；
1.創(chuàng)建地圖容器元素
2.引入天地圖,tk：在官網申請；
2.1index.html 中引入
2.2獲取天地圖key
用戶系統(tǒng)
創(chuàng)建新應用 ===> 填寫信息(注意應用類型選擇服務器端) ===> 得到key
?3.初始化地圖對象
注冊天地圖
地圖的最基本使用實例文件
<template>
<!--創(chuàng)建地圖容器元素-->
<div id="tdtMapDivID" class="divTdtMap"></div>
</template>
<script>
export default {
name: 'TdtMap',
data() {
return {
tdtMap: {}
};
},
created() { },
mounted() {
// 初始化天地圖
this.initTdtMap();
},
watch: {},
methods: {
// 初始化天地圖
initTdtMap() {
let T = window.T;
this.tdtMap = new T.Map(this.tdtMapDivID);
//設置顯示地圖的中心點和級別
this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);
// 5.創(chuàng)建地圖類型控件
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: '衛(wèi)星',
icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
layer: window.TMAP_SATELLITE_MAP
}]);
// 6.將控件添加到地圖，一個控件實例只能向地圖中添加一次。
this.tdtMap.addControl(ctrl);
// 7.創(chuàng)建坐標，通常是調取接口獲得經緯度
const point = new T.LngLat(112.9388, 28.2280);
// 8.創(chuàng)建覆蓋使用的圖標
const icon = new T.Icon({
iconUrl: '../marker-red.png',
iconSize: new T.Point(27, 27),
iconAnchor: new T.Point(10, 25)
});
// 9. 創(chuàng)建在該坐標上的一個圖像標注實例
const marker = new T.Marker(point, icon);
// 10.將覆蓋物添加到地圖中，一個覆蓋物實例只能向地圖中添加一次
this.tdtMap.addOverLay(marker);
}
}
};
</script>
<style scoped>
.divTdtMap {
margin: 0px;
padding: 0px;
width: 100%;
height: 80vh;
z-index: 0;
}
</style>這樣就可以了，不過僅僅是地圖的展示，其它的坐標標志、信息窗體等功能就可以結合天地圖官方實例去實現(xiàn)了
附API總結:
設置地圖中心點、縮放級別: ?map.centerAndZoom(new T.LngLat(lng, lat), zoom);
var map;
var zoom = 12;
//初始化地圖對象
map = new T.Map("mapDiv");
????//設置顯示地圖的中心點和級別
map.centerAndZoom(new T.LngLat(120.19551,30.25082), zoom);
放大地圖:map.zoomIn()//類似雙擊地圖
縮小地圖:map.zoomOut()//類似雙擊地圖
指定縮放幾倍:map.setZoom(14);
地圖平移:map.panTo(new T.LngLat(116.64899, 40.12948));
var bs = map.getBounds(); ??//獲取可視區(qū)域
var bssw = bs.getSouthWest(); ??//可視區(qū)域左下角
var bsne = bs.getNorthEast(); ??//可視區(qū)域右上角
設置是否允許鼠標雙擊放大地圖:
map.enableDoubleClickZoom();//允許雙擊地圖放大
map.disableDoubleClickZoom();//禁止雙擊地圖放大
設置是否允許鼠標滾輪縮放地圖:
map.enableScrollWheelZoom();//允許鼠標滾輪縮放地圖
map.disableScrollWheelZoom();//禁止鼠標滾輪縮放地圖
設置是否允許鼠標慣性拖拽地圖
map.enableInertia();//允許鼠標地圖慣性拖拽
map.disableInertia()//禁止鼠標地圖慣性拖拽
設置是否允許鍵盤操作地圖
map.enableKeyboard();//允許鍵盤操作地圖
map.disableKeyboard()//禁止鍵盤操作地圖一.準備頁面
根據(jù)HTML 標準，每一份HTML 文檔都應該聲明正確的文檔類型，我們建議您使用最新的符合HTML5 規(guī)范的文檔聲明：
<!DOCTYPE html>二、引入天地圖JavaScript API文件
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰" type="text/javascript"></script>三、創(chuàng)建地圖容器元素
地圖需要一個HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個div元素。將div元素的寬和高分別設置為100%，使其充滿整個屏幕，或者您也可以計算瀏覽器窗口的大小并進行設置。
四、創(chuàng)建地圖實例
//初始化地圖對象
???????var map=new T.Map('mapDiv');五、確定經緯度坐標
var lnglat = new T.LngLat(116.40969,39.89945)這里我們使用T命名空間下的T.Lnglat類來創(chuàng)建一個坐標點。T.Lnglat類描述了一個地理坐標點，其中116.40969表示經度，39.89945表示緯度。
六、地圖初始化
map.centerAndZoom(lnglat,12);在創(chuàng)建地圖實例后，我們需要對其進行初始化，map.centerAndZoom方法要求設置中心點坐標和地圖級別。 地圖必須經過初始化才可以執(zhí)行其他操作。
?
七、天地圖API及服務接口調用418錯誤
幾個月前寫的天地圖API調用，今天發(fā)布一下竟然返回“418，抱歉，您的請求被攔截，因為您的請求疑似攻擊行為！”，以為是ip被黑名單了，換了ip也不行，去官網才發(fā)現(xiàn)自2019年1月1日起地圖API及服務接口調用都需要獲得開發(fā)授權，授權的方法也很簡單，地址：
升級向導
1.注冊用戶
2.申請成為天地圖開發(fā)者
我選擇申請個人開發(fā)，不需要審核，立即生效
3.獲取服務許可（Key密鑰）
申請新應用，也是立即生效
4.使用示例文章來源：http://www.zghlxwxcb.cn/news/detail-429168.html
JavaScript API調用
以天地圖JavaScript API 4.0為例，您只要在引用的API 地址后增加授權信息即可，其余使用方法不變。例如：文章來源地址http://www.zghlxwxcb.cn/news/detail-429168.html
http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰到了這里，關于Vue中使用天地圖的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
