一、了解天地图

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

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

            天地图-地图API-范例-H5定位        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}            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);        }    

本示例演示如用H5定位所在城市

在入口index.html中加入cdn以达到全局效果

                      Mars3D三维地球APP        

然后在js文件中或者vue中就不需要再导入了,可以直接使用

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