目錄
first：
second:
third：
first：
前往高德地圖開放平臺注冊key https://lbs.amap.com/
需要注意的是，我這邊用的是 如果是自己的專案使用，注冊個人認證的就行 公司用的需要去購買企業認證，不然每天api訪問次數有限制，
second:
安裝高德地圖依賴：npm i @amap/amap-jsapi-loader --save
引入
import AMapLoader from '@amap/amap-jsapi-loader';
third：
上代碼：
<template>
<div id="app">
<!-- 地圖容器 -->
<div id="container"></div>
</div>
</template>創建一個map接收， 填入平臺注冊的key：
<script>
// 引入loader
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data() {
return {
map: null, // 用于接收
};
},
created() {
this.getmap();
},
methods: {
getmap() {
AMapLoader.load({
key: "", // 申請好的Web端開發者Key
version: "1.4.15", // 指定要加載的 JSAPI 的版本，預設時默認為 1.4.15
})
.then((AMap) => {
// 在data中宣告的map
this.map = new AMap.Map("container");
})
.catch();
},
},
};
</script><style scoped>
#container {
width: 1000px;
height: 600px;
margin: 100px auto;
}
</style>>另外，
可直接在new aMap.map這直接定義地圖的一些屬性： 語言，創建點坐標，視圖，級別等
methods: {
getmap() {
AMapLoader.load({
key: "", // 申請好的Web端開發者Key
version: "1.4.15", // 指定要加載的 JSAPI 的版本，預設時默認為 1.4.15
})
.then((AMap) => {
// 在data中宣告的map
this.map = new AMap.Map("container",{
lang: "zh_en", // en，zh_en, zh_cn 可選
center: [116.40, 39.90], // 【 東經，北緯 】
viewMode:'3D', // 使用3D視圖 不寫默認2D視圖
zoom: 13, // 級別
});
})
.catch();
},
},最終效果：
更多功能詳細見官方檔案： https://lbs.amap.com/api/javascript-api/guide/abc/load~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/378215.html
標籤：其他
上一篇：AttributeError:'dict'物件沒有屬性'click'錯誤與find_element_by_css_selector()和click()使用Sel
下一篇：前端學習者應該知道的前端學習方向