高德地圖開放平臺 https://lbs.amap.com/
第一步：首頁下拉--開發(fā)文檔--web端--地圖 JS API(web js使用文檔)--概述--點擊左側(cè)"準備"
注冊登陸后點擊選擇右上角的--應(yīng)用管理---創(chuàng)建新應(yīng)用抑胎，獲得key
<style>
#container {
width: 300px;
height: 180px;
background-color: pink
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: 'http://127.0.0.1:5500/lianxi.html',
// 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=bdf3b4749198308b900c5e3dd4451ea1"></script>
</body>
第二步：再回到“概述”頁面--快速上手旦事，選擇需要的代碼加上并修改您的代理服務(wù)器域名或地址 和key值遂庄。（https://lbs.amap.com/api/javascript-api/summary/）首頁向下拉--開發(fā)文檔--web端--地圖 JS API(web js使用文檔)，添加JS代碼
獲取某地經(jīng)度緯度：開放平臺菜單“開發(fā)支持”--坐標拾取器
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#container {
width: 600px;
height: 360px;
background-color: pink
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: 'http://127.0.0.1:5500/lianxi.html',
// 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=bdf3b4749198308b900c5e3dd4451ea1"></script>
<script>
var map = new AMap.Map('container', {
zoom: 11,//級別
center: [115.582036, 37.550424],//中心點坐標
viewMode: '3D'//使用3D視圖
});
var marker = new AMap.Marker({
position: [115.582036, 37.550424]//位置
})
map.add(marker);//添加到地圖
var lineArr = [
[115.582036, 37.550424],
[115.589036, 37.554424],
[115.584036, 37.558424],
[115.580036, 37.551424]
];
var polyline = new AMap.Polyline({
path: lineArr, //設(shè)置線覆蓋物路徑
strokeColor: "#3366FF", //線顏色
strokeWeight: 5, //線寬
strokeStyle: "solid", //線樣式
});
map.add(polyline);
var infoWindow = new AMap.InfoWindow({ //創(chuàng)建信息窗體
isCustom: true, //使用自定義窗體
content: '<div style="padding:10px;border:1px solid skyblue;font-size:12px;background-color:rgba(255,255,255,.4)">冀州娃肿，是漢籍《禹貢》所描述的漢地九州之一 [1] 〉偷《尚書·禹貢》記載旧蛾，大禹分天下為九州，其中即有冀州邓萨，位列九州之首地梨，包括現(xiàn)在北京市菊卷、天津市、河北省宝剖、山西省洁闰、河南省北部、及遼寧省與內(nèi)蒙部分地區(qū)万细。</div>', //信息窗體的內(nèi)容可以是任意html片段
offset: new AMap.Pixel(16, -45)
});
var onMarkerClick = function (e) {
infoWindow.open(map, e.target.getPosition());//打開信息窗體
//e.target就是被點擊的Marker
}
var marker = new AMap.Marker({
position: [115.582036, 37.550424]
})
map.add(marker);
marker.on('click', onMarkerClick);//綁定click事件
</script>
</body>
</html>
