背景出于原先用的高德的API收费的情况下，改用这个（版本4.0），算是记录一下自己第一次接触地图相关的需求，也是第一次在掘金写文章hh，懂得不多，欢迎指正
首先需要在天地图官方文档中申请应用key，然后需要在项目的根目录文件引入（刚开始直接在单文件里面引的，发现不管用，具体原因下去再研究研究），#部分便是申请的应用key，我这里引了四条，一般情况引入第一条就够，后续三条是因为项目中用到了车辆轨迹相关功能
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=######"></script>
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
<script type="text/javascript" src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
接下来就是初始化部分
// 准备一个空的div用来渲染地图
html <div id="mapDiv" class="map"></div>
script
// mounted中定义方法或者直接进行初始化
mounted() {
this.Init();
this.map = new T.Map("mapDiv", { projection: "EPSG:4326",minZoom:5,maxZoom:15});
// longitude, latitude 代表经度和纬度，zoom表示缩放比例
this.map.centerAndZoom(new T.LngLat(longitude, latitude), this.zoom);
},
初始化完成之后便可以参考官方Api进行标注或者编写类似功能，这里先贴标注相关
//创建图片对象
var icon = new T.Icon({
iconUrl: that.huoche,
iconSize: new T.Point(40, 40),
iconAnchor: new T.Point(10, 25),
});
//创建标注对象
let marker = new T.Marker(new T.LngLat(longitude, latitude), {
icon: icon,
});
//向地图上添加标注
map.addOverLay(marker);
//创建地图图层对象
var ctrl = new T.Control.MapType({ mapTypes: that.mapTypeSelect }); // 初始化地图类型选择控件
map.addControl(ctrl); //添加地图选择控件
//移动图层(这里设置初始化地图类型，默认是普通地图，可以设置卫星图等等)
// map.removeControl(window.TMAP_NORMAL_MAP);
//添加图层
// map.addControl(window.TMAP_HYBRID_MAP);
// 添加文字标注
var content = [`<div class="text-div">${that.shipData.船名}</div>`];
var latlng = new T.LngLat(longitude, latitude);
var label = new T.Label({
text: content.join("<br>"),
position: latlng,
offset: new T.Point(-50, -40),
});
//创建地图文本对象
map.addOverLay(label);
效果图
下面添加折线覆盖物，类似API文档已经写得很详细了，直接拿来用即可
// data为数据源
let lineArr = [];
if (data.length) {
for (var i = 0; i < data.length; i = i + 1) {
lineArr.push(new T.LngLat(data[i]["lon"], data[i]["lat"]));
}
}
//创建线对象
var line = new T.Polyline(lineArr, {
color: "#b8f5ff",
weight: 2,
lineStyle: "dashed",
});
//向地图上添加线
this.map.addOverLay(line);
记录下地图轨迹使用，这是官方的一个开源库，链接地址
var lineArr = [];
if (data.length) {
for (var i = 0; i < data.length; i = i + 1) {
var lonlat = [];
lonlat[0] = data[i]["longitude"] / 1000000;
lonlat[1] = data[i]["latitude"] / 1000000;
let newlonlat = this.wgs84togcj02(lonlat[0], lonlat[1]); //动图坐标wgs84转gcj02
lineArr.push(newlonlat);
}
}
let config = {
policy: 0, //驾车策略
onSearchComplete: that.searchResult, //检索完成后的回调函数
};
let drivingRoute = new T.DrivingRoute(map, config);
// 清除地图所有覆盖物
map.clearOverLays();
var startLngLat = new T.LngLat(lineArr[0][0], lineArr[0][1]);
var endLngLat = new T.LngLat(
lineArr[lineArr.length - 1][0],
lineArr[lineArr.length - 1][1],
);
//驾车路线搜索
drivingRoute.search(startLngLat, endLngLat);
searchResult(result) {
var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png"; //起点图标
var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png"; //终点图标
//添加起始点
var startMarker = new T.Marker(result.getStart(), {
icon: new T.Icon({
iconUrl: startIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31),
}),
});
this.map.addOverLay(startMarker);
// 添加结束点
var endMarker = new T.Marker(result.getEnd(), {
icon: new T.Icon({
iconUrl: endIcon,
iconSize: new T.Point(44, 34),
iconAnchor: new T.Point(12, 31),
}),
});
this.map.addOverLay(endMarker);
//获取方案个数
var routes = result.getNumPlans();
for (var i = 0; i < routes; i++) {
//获得单条驾车方案结果对象
var plan = result.getPlan(i);
this._CarTrack = new T.CarTrack(this.map, {
interval: 5,
speed: 10,
carstyle: {
display: true,
iconUrl: this.huoche,
width: 80,
height: 80,
},
dynamicLine: true,
Datas: plan.getPath(),
polylinestyle: {
color: '#b8f5ff',
weight: 2,
width: 6, opacity: 0.8
},
passOneNode: this.carpassOneNodeRecord
});
}
},
//这个方法主要目的是让轨迹到终点时候停止，方法自带方法到终点还会重新运动
carpassOneNodeRecord(lnglat, index, length) {
if (index === length) {
this._CarTrack.stop();
}
},
