vue3 集成天地图，完美实例
在Vue 3中，你可以使用天地图JavaScript API进行集成。以下是一个基本的例子，展示了如何在Vue 3组件中集成天地图并添加一个地图实例：
1、首先，确保你已经在你的项目中包含了天地图的JavaScript API。你可以通过以下方式添加：
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key">script>
2、创建一个Vue 3组件，并在组件中添加地图的初始化逻辑，先上代码，代码中实现了部分功能。如果需要详细，可以联系我。
<template>
<div class="dashboard-editor-container">
<div id="mapDiv" style="position: absolute; width: 96%; height: 80%">div>
div>
template>
<script setup name="Index">
const dataMap = ref({})
// 响应式数据
const data_info = ref([]);
const init = () => {
//这里T指向天地图对象
var T = window.T;
//初始化地图，创建一个新的地图实例
//其中 `T.Map` 接收的第一个参数是在html中天地图标签的ID
//第二个参数是天地图的参考系，我这里设置的是 `EPSG:4326`，也就是WGS84 坐标参考系。
//map = new T.Map("mapDiv","EPSG:4326");
map = new T.Map("mapDiv");
//这一步调用了天地图的setMapType方法，用来设置天地图的图层类型，我这里设置的是卫星图图层
map.setMapType(window.TMAP_HYBRID_MAP );
//这一步设置的是地图的初始化后的中心点坐标以及缩放级别
//做完这一步，天地图就以及能在地图上显示出来了
map.centerAndZoom(new T.LngLat(105.28501, 27.301693), zoom);
//创建缩放平移控件对象(H5)
control = new T.Control.Zoom();
// //添加缩放平移控件(H5)
map.addControl(control);
// //这里我创建了一个手动选址的实例，以后再讲
// var cb = new T.CoordinatePickup(map, {callback: handChoose})
// cb.addEvent();
//这里我创建了一个地址搜索的实例
//第一个参数固定为你的天地图实例，也就是上面的map
//第二个参数是每页显示的最大内容数量，我这里设置的是显示10个地名搜索结果
//locateSearch = new T.LocalSearch(map,{pageCapacity:10})
//这里是我自己写的一个显示行政区划边界范围的组件,以后在讲
//var YT = totianjson(yantian,"red",0.5)
//map.addOverLay(YT)
//创建图片对象
// var icon = new T.Icon({
// iconUrl:"http://api.tianditu.gov.cn/img/map/markerA.png",
// iconSize:new T.Point(19,27),
// iconAnchor:new T.Point(10,25)
// })
// //向地图上添加自定义标
// var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), {icon: icon});
// map.addOverLay(marker);
// //设置显示地图的中心点和级别
// map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
// var latlng = new T.LngLat(116.420837,39.902395);
// var label = new T.Label({
// text: "天地图：https://www.tianditu.gov.cn ",
// position: latlng,
// offset: new T.Point(-9, 0)
// });
// //创建地图文本对象
// map.addOverLay(label);
// var definedOverlay = T.Overlay.extend({
// initialize: function (lnglat, text, text2, options) {
// this.lnglat = lnglat;
// this.setOptions(options);
// this._text = text;
// this._overText = text2;
// },
// onAdd: function (map) {
// this.map = map;
// var div = this._div = document.createElement("div");
// div.style.position = "absolute";
// div.style.backgroundColor = "#EE5D5B";
// div.style.border = "1px solid #BC3B3A";
// div.style.color = "white";
// div.style.height = "18px";
// div.style.padding = "2px";
// div.style.lineHeight = "18px";
// div.style.whiteSpace = "nowrap";
// div.style.MozUserSelect = "none";
// div.style.fontSize = "12px";
// var span = this._span = document.createElement("span");
// div.appendChild(span);
// span.appendChild(document.createTextNode(this._text));
// var that = this;
// var arrow = this._arrow = document.createElement("div");
// arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
// arrow.style.position = "absolute";
// arrow.style.width = "11px";
// arrow.style.height = "10px";
// arrow.style.top = "22px";
// arrow.style.left = "10px";
// arrow.style.overflow = "hidden";
// div.appendChild(arrow);
// div.onmouseover = function () {
// this.style.backgroundColor = "#6BADCA";
// this.style.borderColor = "#0000ff";
// this.getElementsByTagName("span")[0].innerHTML = that._overText;
// arrow.style.backgroundPosition = "0px -20px";
// }
// div.onmouseout = function () {
// this.style.backgroundColor = "#EE5D5B";
// this.style.borderColor = "#BC3B3A";
// this.getElementsByTagName("span")[0].innerHTML = that._text;
// arrow.style.backgroundPosition = "0px 0px";
// }
// map.getPanes().overlayPane.appendChild(this._div);
// this.update(this.lnglat);
// },
// onRemove: function () {
// var parent = this.div.parentNode;
// if (parent) {
// parent.removeChild(this.div);
// this.map = null;
// this.div = null;
// }
// },
// setLnglat: function (lnglat) {
// this.lnglat = lnglat;
// this.update();
// },
// getLnglat: function () {
// return this.lnglat;
// },
// setPos: function (pos) {
// this.lnglat = this.map.layerPointToLngLat(pos);
// this.update();
// },
// /**
// * 更新位置
// */
// update: function () {
// var pos = this.map.lngLatToLayerPoint(this.lnglat);
// this._div.style.top = ( pos.y - 36) + "px";
// this._div.style.left = (pos.x - 11) + "px";
// }
// });
// var point = new T.LngLat(116.40438, 39.87877);
// var pdefinedOverlay = new definedOverlay(point, "天坛公园", "北京市东城区天坛东路甲1号", {});
// map.addOverLay(pdefinedOverlay);
// var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
// [116.406605,39.921585,"地址：北京市东城区东华门大街"],
// [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
// ];
// 从接口获取坐标数据并更新地图
getIndexData().then(data_info => {
// 假设 data 是一个包含坐标的数组
// 你可以在这里添加标记、绘制路径等
// 例如，添加一个标记
for(var i=0;i<data_info.length;i++){
//var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1])); // 创建标注
var content = data_info[i][2];
//map.addOverLay(marker); // 将标注添加到地图中
//创建图片对象
var icon = new T.Icon({
//iconUrl:"http://api.tianditu.gov.cn/img/map/markerA.png",
iconUrl:iconUrl,
iconSize:new T.Point(19,19),
iconAnchor:new T.Point(10,25)
})
//向地图上添加自定义标
var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1]), {icon: icon});
map.addOverLay(marker);
addClickHandler(content,marker);
}
});
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var point = e.lnglat;
var marker = new T.Marker(point);// 创建标注
var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
map.openInfoWindow(markerInfoWin,point); //开启信息窗口
}
}
script>