html5网页-浏览器中实现高德地图定位功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图API位置定位示例</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API_KEY"></script>
<script type="text/javascript">
var map, geolocation;
//加载地图，调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true
timeout: 10000 //超过10秒后停止定位，默认：5s
});
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
var str = ['定位成功'];
str.push('经度：' + data.position.getLng());
str.push('纬度：' + data.position.getLat());
if (data.accuracy) {
str.push('精度：' + data.accuracy + ' 米');
}
//如为IP定位结果则无经纬度
if (data.position.getLng() && data.position.getLat()) {
map.setCenter(data.position); //设定地图中心点
} else {
str.push('IP定位成功');
}
}
//返回定位出错信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
}
</script>
</head>
<body>
<div id="container" style="height:500px;width:500px;"></div>
<div id="tip"></div>
</body>
</html>在这段代码中，我们首先引入了高德地图API，并在head标签内包含了地图初始化和定位的JavaScript代码。在body标签内，我们有一个id为container的div，这是地图将要渲染的容器。onError函数用于在定位失败时显示错误信息，而onComplete函数则用于解析定位数据，并在定位成功时将地图中心设置为定位所得的位置。这个示例展示了如何在网页中集成高德地图API并实现定位功能。
评论已关闭