写一个高德api的地图定位前端页面
时间: 2024-06-11 22:04:24 浏览: 94
很抱歉,我作为AI语言模型无法生成完整的前端页面代码,但我可以提供你一个基本的HTML和JavaScript代码示例,供你参考和学习:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德地图定位示例</title>
<style>
#container {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的 key"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>
<script src="./index.js"></script>
</body>
</html>
```
JavaScript代码(index.js):
```
// 初始化地图
var map = new AMap.Map('container', {
zoom: 12, // 地图缩放级别
center: [116.39, 39.9] // 地图中心点坐标
});
// 定位插件
AMap.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位,默认为false
timeout: 10000, // 超过10秒后停止定位,默认为无穷大
buttonPosition: 'RB', // 定位按钮的位置
zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
buttonOffset: new AMap.Pixel(10, 10) // 定位按钮距离地图边缘的偏移量
});
// 执行定位
geolocation.getCurrentPosition(function (status, result) {
if (status === 'complete') {
onComplete(result);
} else {
onError(result);
}
});
});
// 定位成功回调函数
function onComplete(result) {
var lnglat = [result.position.lng, result.position.lat]; // 获取定位点坐标
map.setCenter(lnglat); // 设置地图中心点为定位点
var marker = new AMap.Marker({ // 在定位点上添加标记
position: lnglat,
title: '您的位置'
});
marker.setMap(map); // 将标记添加到地图上
}
// 定位失败回调函数
function onError(result) {
alert('定位失败');
}
```
注意:
1. 你需要将代码中的“你的 key”替换为你自己的高德地图API key;
2. 你需要在高德地图开放平台上申请并开通“Web服务API”和“JavaScript API”,并获取相应的API key。
阅读全文