一、了解天地图

http://lbs.tianditu.gov.cn/api/js4.0/examples.html
在其中可以了解天地图的基本使用教程

但其中的教程均为h5引入cdn的方式
以h5定位为例来改成vue项目
源码:

<!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中就不需要再导入了，可以直接使用

如

/* eslint-disable */
// 通过经纬度获取详细地址
export default function getlocation(){
    const lc = new T.LocalCity();
    lc.location(function(e){
        console.log(e)
    })
}

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。