No.17可視化大屏--vite+vue3 高德地圖注冊
一、高德開放平臺
官網：https://lbs.amap.com/
1. 登錄
可以用淘寶、QQ等直接登錄。
2.打開控制臺
3.創建新應用
4.添加key
二、在普通網頁中測試地圖
1.進入JS API
2.準備
3.快速上手
1）準備key和密鑰（按前面的創建應用添加key）
2) HTML 頁面準備
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>HELLO，AMAP!</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
3）JS API 的加載和地圖初始化（添加在body中）
使用 JS API Loader 來加載，引入在控制臺申請的 key 和安全密鑰。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>HELLO，AMAP!</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「你申請的安全密鑰」",
};
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
AMapLoader.load({
key: "「你申請的應用Key」", //申請好的Web端開發者 Key，調用 load 時必填
version: "2.0", //指定要加載的 JS API 的版本，缺省時默認為 1.4.15
})
.then((AMap) => {
const map = new AMap.Map("container");
})
.catch((e) => {
console.error(e); //加載錯誤提示
});
</script>
</div>
</body>
</html>
4）使用默認瀏覽器運行Test1.html
三、設置地圖的相關配置
參考入門教程
浙公網安備 33010602011771號