Bootstrap

在天地图HTML模板中添加地图标记图标,然后使用JavaScript代码将地图定位到当前位置

在天地图HTML模板中,可以使用以下代码添加地图标记图标:

<img src="http://api.tianditu.gov.cn/img/map/marker_red.png" style="width: 32px; height: 32px;" id="marker">

这段代码会在地图上添加一个红色的标记图标,并给它一个id为"marker",可根据需求选择不同的标记图标。

接着,在JavaScript代码中使用以下代码获取当前位置经纬度并将地图定位到该位置:

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        // 获取当前位置经纬度
        var longitude = position.coords.longitude;
        var latitude = position.coords.latitude;
        // 将地图中心点设置为当前位置
        map.setCenter(new TLngLat(longitude, latitude));
        // 设置标记图标的位置为当前位置
        var marker = document.getElementById("marker");
        marker.style.display = "block";
        marker.style.left = map.pointToOverlayPixel(new TLngLat(longitude, latitude)).x - 16 + "px";
        marker.style.top = map.pointToOverlayPixel(new TLngLat(longitude, latitude)).y - 32 + "px";
    });
}

这段代码会使用浏览器的地理位置功能获取当前位置的经纬度,并将地图中心点设置为该位置。然后,它还会将标记图标的位置设置为当前位置,并使其在地图上可见。

;