一、了解天地圖
http://lbs.tianditu.gov.cn/api/js4.0/examples.html
在其中可以了解天地圖的基本使用教程
但其中的教程均為h5引入cdn的方式
以h5定位為例來改成vue項目
源碼:文章來源：http://www.zghlxwxcb.cn/news/detail-695041.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地圖"/>
<title>天地圖－地圖API－范例－H5定位</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map;
var zoom = 12;
function onLoad() {
//初始化地圖對象
map = new T.Map("mapDiv");
//設置顯示地圖的中心點和級別
map.centerAndZoom(new T.LngLat(116.40969, 38.89945), zoom);
var lo = new T.Geolocation();
fn = function (e) {
if (this.getStatus() == 0){
map.centerAndZoom(e.lnglat, 15)
alert("獲取定位坐標："+e.lnglat.lat + "," + e.lnglat.lng)
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
}
if(this.getStatus() == 1){
map.centerAndZoom(e.lnglat, e.level)
alert("獲取定位坐標："+e.lnglat.lat + "," + e.lnglat.lng)
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
}
}
lo.getCurrentPosition(fn);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如用H5定位所在城市</p>
</body>
</html>
在入口index.html中加入cdn以達到全局效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=****"></script>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
<title>Mars3D三維地球APP</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
然后在js文件中或者vue中就不需要再導入了，可以直接使用
如文章來源地址http://www.zghlxwxcb.cn/news/detail-695041.html
/* eslint-disable */
// 通過經緯度獲取詳細地址
export default function getlocation(){
const lc = new T.LocalCity();
lc.location(function(e){
console.log(e)
})
}
到了這里，關于如何再vue項目中使用cdn（以使用天地圖得cdn獲取當前位置為例）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
