天地图HTML模板中添加地图标记图标,然后使用JavaScript代码将地图定位到当前位置 Network location provider at 'https://www.googleapis.com/' : ERR_CONNECTION_RESET.
时间: 2023-05-27 17:01:23 浏览: 189
对于HTML模板添加地图标记,可以使用以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图添加地图标记示例</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥"></script>
<script>
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
</script>
</body>
</html>
```
其中,由于使用了百度地图API,需要将“你的百度地图密钥”替换成自己的百度地图开发者密钥。
如果想要将地图定位到当前位置,可以使用HTML5的Geolocation API获取当前位置,然后将地图中心点设置为当前位置,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图定位到当前位置示例</title>
</head>
<body>
<div id="map" style="width:100%;height:500px;"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥"></script>
<script>
var map = new BMap.Map("map");
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
function error() {
console.log("无法获取当前位置");
}
navigator.geolocation.getCurrentPosition(success, error);
</script>
</body>
</html>
```
这样,地图就会定位到当前位置,并在地图上标记出当前位置的标记点。需要注意的是,定位需要用户授权,如果用户不同意授权,则无法获取到当前位置。另外,代码中使用了console.log输出调试信息,需要在浏览器控制台中查看。
阅读全文