https://lbs.amap.com/ 高德地图开放平台
1.注册账号
2.控制台-应用管理-我的应用
创建 新应用
添加应用详情:
选择js-web
<!-- https://lbs.amap.com/ 高德地图开放平台
1.注册账号 得到key 放到 Thiskey
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=Thiskey"></script>
-->
html页面:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图Demo</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=key"></script>
<!-- https://lbs.amap.com/ 高德地图开放平台
1.注册账号 得到key 放到 Thiskey
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=Thiskey"></script>
-->
<style type="text/css">
#wrapper {
width: 1500px;
height: 800px;
}
</style>
</head>
<body>
<div align="center">
<div id="wrapper"></div>
</div>
<script type="text/javascript">
window.onload = function () {
AMap.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
// 是否使用高精度定位,默认:true
enableHighAccuracy: true,
// 设置定位超时时间,默认:无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
buttonOffset: new AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
geolocation.getCurrentPosition()
AMap.event.addListener(geolocation, 'complete', e => {
console.log(e)
// 定位成功之后做的事 // 定位成功之后再定位处添加一个marker
console.log(e.position.lat)
console.log(e.position.lng)
var mapSet = []
mapSet[1] = e.position.lat
mapSet[0] = e.position.lng
console.log(mapSet)
var map = new AMap.Map('wrapper', {
resizeEnable: true,
center: mapSet, // 地图标记title
zoom: 12 // 地图视图缩放级别
})
const marker = new AMap.Marker({
position: map.getCenter()
})
marker.setMap(map)
})
AMap.event.addListener(geolocation, 'error', e => {
console.log(e) // 定位失败做的事
})
})
}
</script>
</body>
</html>