天地图之自定义标记点

需求:在地图上标记监控点位,地图引入的过程就不多啰嗦,可参考此专栏前几篇文章,下面直接介绍实现步骤

1.绘制标记点(如果多个点则需要放到循环体循环渲染)

点的坐标

var position = new T.LngLat(经度, 纬度)

点的图标样式

var icon = new T.Icon({
	iconUrl: "图标路径", //请求图标图片的URL
	iconSize: new T.Point(30, 30), //图标可视区域的大小。
	iconAnchor: new T.Point(30, 30) //图标的定位锚点
});

点的文本标注

var label = new T.Label({
	text: "文本内容", //文本标注的内容
	position: position, //文本标注的地理位置
	offset: new T.Point(-50, 20) //文本标注的位置偏移值
})

渲染到地图

var marker = new T.Marker(position, {
	icon: icon
})
this.map.addOverLay(label);
this.map.addOverLay(marker);

该点无实际意义,仅为演示
在这里插入图片描述

2.点击标记点
marker.addEventListener("click", (e) => {
	console.log(e)
})
  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
地图并没有直接提供给坐标点添加自定义名称的功能,但你可以通过在地图上添加自定义标记(marker)来实现给坐标点添加自定义名称的效果。以下是一个示例代码: ```javascript // 假设你有一个经纬度坐标和自定义名称 const lng = 116.397128; const lat = 39.916527; const customName = "自定义名称"; // 创建地图对象 const map = new T.Map("mapContainer"); // 设置地图的中心点和缩放级别 map.centerAndZoom(new T.LngLat(lng, lat), 15); // 创建自定义标记 const marker = new T.Marker(new T.LngLat(lng, lat)); // 创建信息窗口 const infoWindow = new T.InfoWindow(customName); // 绑定标记的点击事件 marker.addEventListener("click", function() { // 在点击标记时显示信息窗口 map.openInfoWindow(infoWindow, new T.LngLat(lng, lat)); }); // 将标记添加到地图上 map.addOverLay(marker); ``` 在上述代码中,`lng`和`lat`分别表示经度和纬度坐标,`customName`表示自定义的名称。通过创建一个地图对象,并设置地图的中心点和缩放级别,然后创建一个自定义标记,并绑定点击事件,在点击标记时显示自定义的信息窗口,最后将标记添加到地图上。这样,当你在地图上点击该标记时,会出现一个带有自定义名称的信息窗口。 请注意,上述示例代码仅演示了基本的添加自定义名称的功能,你可以根据自己的需求进行扩展和使用。另外,天地图的API还提供其他功能,如绘制图形、搜索功能等,你可以在官方文档中查找更多相关信息。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值