El proyecto desarrollado recientemente requiere el uso de Tiantu. No lo he tocado antes. Después de algunas investigaciones, comencé a hacerlo. Es muy fácil de usar. Veamos el efecto.
No entraré en detalles sobre la introducción.
Mire directamente el código del punto de marca
//这是一个点击事件
const allmarker = () => {
var arrs = [ ];//这里面写自己的坐标数据(经纬度)
//设置图标样式尺寸
var icon = new T.Icon({
iconUrl: "https://cdn-icons-png.flaticon.com/512/1483/1483336.png",
iconSize: new T.Point(30, 30),
iconAnchor: new T.Point(10, 56),
});
//循环坐标数组,创建标记点
arrs.forEach((item, index) => {
let markers = new T.Marker(new T.LngLat(item[0], item[1]), {
//item[0]是经度,item[1]是纬度
icon: icon,
});
wxMap.addOverLay(markers);
//执行标记点函数
addwindowclick(markers, index);
});
};
Haga clic en el marcador para mostrar una ventana emergente
let addwindowclick = (marker, i) => {
marker.addEventListener("click", function (e) {
//点击坐标点切换中心点(可以不写)
Longitude.value = marker.or.lng;
Latitude.value = marker.or.lat;
wxMap.centerAndZoom(
new T.LngLat(Longitude.value, Latitude.value),
zoom.value
);
//下面的步骤必须写
var point = e.lnglat;
// 创建信息窗口对象
var markerInfoWin = new T.InfoWindow();
var sContent = `
<div id="win_box">
//自定义窗体内容
</div>`;
//设置信息窗口要显示的内容
markerInfoWin.setContent(sContent);
//setOffset设置信息浮窗显示时向右下角偏移量(像素)。-30则代表向上偏移
markerInfoWin.setOffset(new T.Point(0, -15));
//开启信息窗口
wxMap.openInfoWindow(markerInfoWin, point);
Esta es la función, más métodos pueden analizar seriamente el centro de ejemplo oficial
Centro de ejemplos de Tianditu http://lbs.tianditu.gov.cn/api/js4.0/examples.html
El artículo es solo para referencia. Si hay algún error, indíquelo o complételo a tiempo.