引入天地图
在vue的静态资源目录下的index.html
中引入天地图的底图,开发天地图源码路径:天地图API
1.申请key(地址:点击跳转)
2.加载天地图,引用:
public/index.html
3.创建地图并展示
<div class="map-container" id="containerT" style="border-radius: 40px"></div>
//数据结构
dituDate:[
{
longitude: "103.196532",
latitude: "29.770933",
name: "下站1F-售货区",
}
]
// 创建地图
createMap() {
const T = window.T;
// 3.初始化地图对象
this.tMap = new T.Map('containerT', {});
// 4.设置显示地图的中心点和级别
this.tMap.centerAndZoom(new T.LngLat(116.39759, 39.908776), 13);
// 5.创建地图类型控件
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: '卫星',
// icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
// layer: window.TMAP_SATELLITE_MAP,
// },
]);
// 6.将控件添加到地图,一个控件实例只能向地图中添加一次。
// this.tMap.addControl(ctrl); //小窗口
// 8.创建覆盖使用的图标
const icon = new T.Icon({
iconUrl: '../marker-red.png', //可自己修改成本地图片
iconSize: new T.Point(27, 27),
iconAnchor: new T.Point(10, 25),
});
this.dituDate.forEach((element) => {
// 9. 创建在该坐标上的一个图像标注实例
let point = new T.LngLat(element.longitude, element.latitude);
let marker = new T.Marker(point, icon);
// console.log(point, 'point');
element.lnglat = point;
// 10.将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次
this.tMap.addOverLay(marker);
});
this.tMap.checkResize();
},
展示效果
4.向地图添加点位,并且自定义弹窗
新增这行代码
//自定义点位弹窗
addClickHandler(content, marker) {
var T = window.T;
marker.addEventListener('click', function (e) {
// console.log(e, 'e', content, marker);
var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象
// 弹窗模版 自己可修改css,我需求只展示名字
const sContent = `<div class="module-title" style="color: black;font-size: 14px;">${content.name}</div>
`;
// 相对于点偏移的位置
markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });
marker.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口
});
},
展示结果