1. 申请开发者 KEY
使用前，请您先申请开发者 Key，这里您可以和 JS-API 共用同一个开发者 Key。
2. 引入 JS-API，其中开发者 key 和版本号 v 必填
<script src="https://webapi.amap.com/maps?key=开发者Key(必填)&v=1.4.15(必填，建议使用最新版本)">
3. 创建地图实例
在使用地图前，我们需要创建一个容器用于显示地图底图，这一步和 JS-API 一样，通过 AMap.Map创建。
<!-- DIV需要指定宽高，才可以显示底图 -->
<div id="mapCon"></div>
<!-- JS部分 -->
var map = new AMap.Map("mapCon", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:12//级别
});4. 代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>JS使用高德地图定位</title>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
if (docEl.clientWidth > 750) {
docEl.style.fontSize = "100px";
doc.getElementById("app").style.width = "750px";
} else {
var width = docEl.clientWidth / 7.5;
docEl.style.fontSize = width + "px";
doc.getElementById("app").style.width = "auto";
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
</script>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
body{font-size: 0.28rem;}
#mapCon{width: 7rem;height: 6rem;margin: 0.2rem auto;border: 1px solid #dedede;}
</style>
</head>
<body>
<div id="app">
<div class="addr-txt">当前地址：<span class="addr"></span></div>
<div id="mapCon"></div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=开发者Key"></script>
<script>
$(function () {
var map = new AMap.Map("mapCon", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:12//级别
});
var setPosition = function (callback) {
map.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认: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);
console.log(geolocation)
geolocation.getCurrentPosition(function (status, result) {
if(status == 'complete'){//定位成功
if(typeof callback == 'function'){
callback(result);
}
}
if(status == 'error'){//定位失败
if(result.info == 'NOT_SUPPORTED'){
alert("当前浏览器不支持定位功能");
return false;
}
if(result.info == 'FAILED'){
var msg = result.message;
if(msg.indexOf('Get ipLocation failed') != -1){
alert("IP精确定位失败");
return false;
}
if(msg.indexOf('sdk定位失败') != -1){
alert("请检查sdk的key是否设置好，以及webview的定位权限及应用和系统的定位权限是否开启");
return false;
}
if(msg.indexOf('Browser not Support html5 geolocation') != -1){
alert("浏览器不支持原生定位接口");
return false;
}
if(msg.indexOf('Geolocation permission denied') != -1){
alert("用户禁用了定位权限");
return false;
}
if(msg.indexOf('Get geolocation time out') != -1){
alert("浏览器定位超时");
return false;
}
if(msg.indexOf('Get geolocation failed') != -1){
alert("定位失败");
return false;
}
}
}
});
});
};
//地图加载成功后调用定位
map.on("complete", function(){
setPosition(function (res) {
var position = res.position;
var address = res.addressComponent;
var addr = address.province + address.city + address.district + address.township + address.street + address.streetNumber;
var lat = position.lat;
var lng = position.lng;
$(".addr").html(addr);
});
});
//地图加载失败
map.on("error", function(){
alert("地图加载失败，请重新进入页面或刷新当前页面重试");
});
});
</script>
</body>
</html>5. 参考文档链接
https://lbs.amap.com/api/javascript-api/reference/location
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。