天地图自定义标记点

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);

点击标记点

marker.addEventListener("click", (e) => {
	console.log(e)
})
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
地图并没有直接提供给坐标添加自定义名称的功能,但你可以通过在地图添加自定义标记(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还提供其他功能,如绘制图形、搜索功能等,你可以在官方文档中查找更多相关信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

周亚鑫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值