在天地图HTML模板中添加地图标记图标,然后使用JavaScript代码将地图定位到当前位置
时间: 2023-05-27 18:01:15 浏览: 58
要在天地图HTML模板中添加地图标记,可以使用如下代码:
```html
<div id="mapContainer"></div>
<script src="//api.tianditu.gov.cn/api?v=4.0&tk=yourKey"></script>
<script>
//初始化地图对象
var map = new T.Map("mapContainer");
//设置地图中心点和缩放级别
map.centerAndZoom(new T.LngLat(116.3972282,39.9096048), 14);
//创建标注对象
var marker = new T.Marker(new T.LngLat(116.3972282,39.9096048));
//添加标注到地图中
map.addOverLay(marker);
</script>
```
其中,`//api.tianditu.gov.cn/api`为天地图API的请求地址,`yourKey`为申请到的API密钥。`mapContainer`为地图容器的标识,需要在HTML模板中添加一个`<div>`元素,并指定`id="mapContainer"`。
上述代码中创建了一个地图对象,并使用`centerAndZoom`方法设置地图中心点和缩放级别。然后创建一个标注对象,指定标注的经纬度坐标,最后将标注添加到地图中。
要使用JavaScript代码将地图定位到当前位置,可以使用Geolocation API获取当前位置,并调用地图对象的`setCenter`方法设置地图中心点。例如:
```js
//获取当前位置
navigator.geolocation.getCurrentPosition(function(position) {
//获取经纬度坐标
var lnglat = new T.LngLat(position.coords.longitude, position.coords.latitude);
//设置地图中心点
map.setCenter(lnglat);
});
```
完整的代码如下:
```html
<div id="mapContainer"></div>
<script src="//api.tianditu.gov.cn/api?v=4.0&tk=yourKey"></script>
<script>
//初始化地图对象
var map = new T.Map("mapContainer");
//设置地图中心点和缩放级别
map.centerAndZoom(new T.LngLat(116.3972282,39.9096048), 14);
//创建标注对象
var marker = new T.Marker(new T.LngLat(116.3972282,39.9096048));
//添加标注到地图中
map.addOverLay(marker);
//获取当前位置
navigator.geolocation.getCurrentPosition(function(position) {
//获取经纬度坐标
var lnglat = new T.LngLat(position.coords.longitude, position.coords.latitude);
//设置地图中心点
map.setCenter(lnglat);
});
</script>
```