利用高德地图javascriptAPI实现模仿滴滴打车定位
使用API
- AMap.Map:地图对象类,封装了地图的属性设置、图层变更、事件交互等接口的类。
- AMap.Geocoder:地理编码与逆地理编码类,用于地址描述与坐标之间的转换。
用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息 - AMap.Geolocation:定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段,
提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位
的成败和结果,一种是在getCurrentPosition的时候传入回调函数来处理定位结果,一种是通过事件监听来取得定位结果。 - AMap.Marker 覆盖物: 构造一个点标记对象,通过MarkerOptions设置点标记对象的属性
代码实现
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Getters Started</title>
<style>
#mainMap {
width: 390px;
height: 450px
}
#resultMapInfo {
position: absolute;
left: 0;
top: 30px;
z-index: 999;
}
</style>
</head>
<body>
<div id="resultMapInfo">请使用4G网络获取定位精确度高</div>
<div id="mainMap"></div>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.3&key=243687cce3d5ac3f7a3b4bb90a97fda1"></script>
<script>
var map = new AMap.Map('mainMap', {
resizeEnable: true,
zoom: 16
}),
geolocation = null,
Marker = null,
geocoder = null,
result = document.getElementById('resultMapInfo');
AMap.event.addListener(map, 'dragging', function() {
Marker.setPosition(map.getCenter())
});
AMap.event.addListener(map, 'dragend', function() {
console.log(map.getCenter())
geocoder.getAddress(map.getCenter(), function(status, data) {
if (status === 'complete' && data.info === 'OK') {
var str = '<p>获取成功</p>';
str += '<p>当前位置:' + data.regeocode.formattedAddress + '</p>';
result.innerHTML = str;
console.log(data.regeocode.formattedAddress)
console.log(map.getCenter().getLat())
console.log(map.getCenter().getLng())
} else {
var str = '<p>定位失败</p>';
str += '<p>错误信息:'
switch (data.info) {
case 'INVALID_UESR_KEY':
str += '用户key非法或过期';
break;
case 'SERVICE_UNAVAILABLE':
str += '请求服务不可用';
break;
case 'INSUFFICIENT_PRIVILEGES':
str += '无权限访问此服务';
break;
case 'INVALID_PARAMS':
str += '请求参数非法';
break;
default:
str += '无网络或其他未知错误';
break;
}
str += ',请重新获取当前位置。</p>';
result.innerHTML = str;
}
});
Marker.setPosition(map.getCenter())
Marker.setAnimation('AMAP_ANIMATION_DROP')
});
AMap.service('AMap.Geocoder', function() {
geocoder = new AMap.Geocoder({
city: "010"
});
});
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
convert: true,
showButton: true,
buttonPosition: 'LB',
buttonOffset: new AMap.Pixel(10, 20),
showMarker: false,
showCircle: false,
panToLocation: true,
zoomToAccuracy: true
});
map.addControl(geolocation);
AMap.event.addListener(geolocation, 'complete', onComplete);
AMap.event.addListener(geolocation, 'error', onError);
geolocation.getCurrentPosition();
});
function onComplete(data) {
Marker = null;
var str = '<p>定位成功</p>';
str += '<p>精度:' + data.accuracy + ' 米</p>';
str += '<p>当前位置:' + data.formattedAddress + '</p>';
if (Marker) {
Marker.setPosition(map.getCenter())
Marker.setAnimation('AMAP_ANIMATION_DROP')
} else {
Marker = new AMap.Marker({
position: map.getCenter(),
animation: 'AMAP_ANIMATION_DROP'
});
Marker.setMap(map);
}
result.innerHTML = str;
};
function onError(data) {
var str = '<p>定位失败</p>';
str += '<p>错误信息:'
switch (data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '无网络或其他未知错误';
break;
}
str += ',请重新获取当前位置。</p>';
if (Marker) {
Marker.setPosition(map.getCenter())
Marker.setAnimation('AMAP_ANIMATION_DROP')
} else {
Marker = new AMap.Marker({
position: map.getCenter(),
animation: 'AMAP_ANIMATION_DROP'
});
Marker.setMap(map);
}
result.innerHTML = str;
};
</script>
</body>
</html>