前端页面引入高德地图
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
//引入高德地图的js和key，怎么拿到key自己百度
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=放key位置"></script>
<style type="text/css">
#app{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
//建立一个容器显示地图
<div id="app"></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)
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('app', {
resizeEnable: true,
center: mapSet, // 地图标记title
zoom: 17 // 地图视图缩放级别,数值越大越精确
})
const marker = new AMap.Marker({
position: map.getCenter()
})
marker.setMap(map)
//如果需要添加标记点，可编辑以下代码
//创建一个标记点
var marker1 = new AMap.Marker({
// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
position: new AMap.LngLat(116.44927, 39.9584),
title: "位置标题"
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker1);
})
AMap.event.addListener(geolocation, 'error', e => {
console.log(e) // 定位失败触发
})
})
}
</script>
</body>
</html>