使用高德
地图 JavaScript API
实现定位到当前
位置可以分为以下几个步骤：
1. 引入高德
地图 JavaScript API 的 SDK 文件
在 HTML 文件中引入高德
地图 JavaScript API 的 SDK 文件，可以通过以下代码
实现：
```html
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德
地图API密钥"></script>
```
需要将 `key` 参数替换成自己的高德
地图 API 密钥。
2. 创建
地图实例
在 JavaScript 文件中创建
地图实例，可以通过以下代码
实现：
```javascript
var map = new AMap.Map('container', {
zoom: 16 //
地图缩放级别
});
```
其中 `container` 是
地图容器的 ID，可以在 HTML 文件中创建一个 `div` 元素作为
地图容器。
3. 获取当前
位置
通过调用高德
地图 JavaScript API 的 `AMap.Geolocation` 类
实现获取当前
位置，可以通过以下代码
实现：
```javascript
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认为 true
timeout: 10000, // 超过 10 秒后停止定位，默认为无穷大
maximumAge: 0, // 定位结果缓存时间，默认为 0
convert: true, // 是否使用坐标转换服务，默认为 true
showButton: false, // 是否显示定位按钮，默认为 true
buttonPosition: 'LB', // 定位按钮的
位置，默认为 'LB'
buttonOffset: new AMap.Pixel(10, 10), // 定位按钮的偏移量，默认为 AMap.Pixel(10, 10)
showMarker: false, // 是否显示定位点，默认为 true
markerOptions: {} // 定位点的样式
});
geolocation.getCurrentPosition(function(status, result) {
if (status === 'complete') {
onComplete(result);
} else {
onError(result);
}
});
function onComplete(result) {
var lng = result.position.getLng(); // 经度
var lat = result.position.getLat(); // 纬度
var accuracy = result.accuracy; // 精度
var address = result.formattedAddress; // 地址
console.log(lng, lat, accuracy, address);
}
function onError(result) {
console.log(result.message);
}
```
在 `getCurrentPosition` 方法中传入两个回调函数，分别用于处理定位成功和失败的情况。在定位成功的回调函数中可以获取到当前
位置的经纬度、精度和地址等信息。
4. 将
地图定位到当前
位置
在定位成功的回调函数中，可以将
地图定位到当前
位置，可以通过以下代码
实现：
```javascript
var marker = new AMap.Marker({
position: [lng, lat], // 定位点的
位置
map: map //
地图实例
});
map.setCenter([lng, lat]); // 将
地图中心点设置为定位点的
位置
```
在创建一个 `AMap.Marker` 实例作为定位点，并将
地图中心点设置为定位点的
位置，
实现将
地图定位到当前
位置。
完整的
实现代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高德
地图定位到当前
位置</title>
<style>
#container {
width: 100%;
height: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德
地图API密钥"></script>
<script>
var map = new AMap.Map('container', {
zoom: 16
});
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
convert: true,
showButton: false,
buttonPosition: 'LB',
buttonOffset: new AMap.Pixel(10, 10),
showMarker: false,
markerOptions: {}
});
geolocation.getCurrentPosition(function(status, result) {
if (status === 'complete') {
onComplete(result);
} else {
onError(result);
}
});
function onComplete(result) {
var lng = result.position.getLng();
var lat = result.position.getLat();
var accuracy = result.accuracy;
var address = result.formattedAddress;
console.log(lng, lat, accuracy, address);
var marker = new AMap.Marker({
position: [lng, lat],
map: map
});
map.setCenter([lng, lat]);
}
function onError(result) {
console.log(result.message);
}
</script>
</body>
</html>
```
在
实现时需要将代码中的 `key` 参数替换成自己的高德
地图 API 密钥。
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
