查看天地图的icon库
时间: 2023-10-08 11:12:43 浏览: 36
您可以通过以下步骤查看天地图的icon库:
1. 打开天地图官网(http://www.tianditu.gov.cn/),选择“服务资源”菜单,进入“地图API”页面。
2. 在页面中选择“控件”选项卡,找到“POI图标库”一栏,点击“查看”按钮。
3. 进入POI图标库页面后,可以看到不同类别的图标,例如公交、地铁、医院、学校等。点击每个类别下的图标,可以查看具体的图标样式和名称。
4. 您也可以通过搜索框,在图标库中搜索特定的图标名称。
注意:天地图的icon库仅供非商业使用,商业使用需要购买授权。
相关问题
vue引入天地图icon类
要在Vue中引入天地图的icon类,你需要先在index.html文件中引入天地图提供的CSS文件,如下所示:
```html
<link rel="stylesheet" href="//api.tianditu.gov.cn/api/v1/styles/css/tdt-icons.css">
```
然后在Vue组件中,你可以使用类似下面的方式来添加天地图的icon类:
```html
<template>
<div>
<i class="tdt-icon tdt-icon-layer"></i>
<i class="tdt-icon tdt-icon-layers"></i>
<i class="tdt-icon tdt-icon-map"></i>
<i class="tdt-icon tdt-icon-maps"></i>
</div>
</template>
```
其中,`tdt-icon`是天地图icon类的前缀,后面跟着具体的icon名称,如`tdt-icon-map`表示地图icon。你可以在天地图提供的CSS文件中查看所有可用的icon类名称。
天地图icon点击事件
天地图的icon点击事件可以通过以下方式实现:
1. 在HTML中添加地图容器和icon:
```
<div id="map"></div>
<img id="my-icon" src="path/to/icon.png">
```
2. 在JavaScript中初始化地图并添加icon:
```
var map = new T.Map("map");
map.centerAndZoom(new T.LngLat(117.20, 31.80), 13);
var myIcon = new T.Marker(new T.LngLat(117.20, 31.80), { icon: new T.Icon({ iconUrl: "path/to/icon.png", iconSize: new T.Point(32, 32) }) });
myIcon.addEventListener("click", function() {
// 在此处添加icon点击事件的处理逻辑
});
map.addOverLay(myIcon);
```
3. 在icon的click事件回调函数中添加处理逻辑,例如弹出信息窗口:
```
var infoWin = new T.InfoWindow("Hello, World!");
myIcon.openInfoWindow(infoWin);
```