1.确定要接入哪家地图平台的api（百度地图，高德地图）,本案例中使用的是高德地图
2.注册高德地图账号--到个人中心--应用管理--创建一个新应用--添加一个key(官方教程:http://lbs.amap.com/---产品--定位--找到javascript api---根据api进行操作)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--设置根字节的字体大小-->
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth * 100 / 375 + 'px';
window.onresize = function(){
document.documentElement.style.fontSize = document.documentElement.clientWidth * 100 / 375 + 'px';
}
</script>
</head>
<body>
<div id="container" style="width:500px; height:300px;font-size: 12px"></div>
<script src="../public/js/jquery-3.0.0.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.4.0&key=88677a1eeae5f527e0cbf0d0a537de11&callback=init"></script>
<script>
function init(){
var map, geolocation;
// 实例化地图
var map = new AMap.Map('container', {
// resizeEnable: true,
});
// 配置插件AMap.Geolocation
map.plugin('AMap.Geolocation', function () {
geolocation = new AMap.Geolocation({
enableHighAccuracy: false,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
maximumAge: 0, //定位结果缓存0毫秒，默认：0
convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, //显示定位按钮，默认：true
buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
// 把当前的位置信息放到页面中
function onComplete(data) {
$('#container').html(data.formattedAddress)
}
// 如果报错把报错信息输出
function onError(data) {
console.log(data)
}
});
}
</script>
</body>
</html>
网友评论