1 開通高德地圖Web端JS API服務(wù)
1、進(jìn)入高德地圖API官網(wǎng)（https://lbs.amap.com/）：
2、注冊登錄。
3、進(jìn)入控制臺。
4、點擊“應(yīng)用管理”，點擊“我的應(yīng)用”，創(chuàng)建新應(yīng)用。
5、添加Key，服務(wù)平臺選擇“Web端（JS API）”，白名單不要填寫，勾選閱讀并同意。
點擊提交后，就能看到Key已經(jīng)生成，記住這里的Key和安全密鑰。
2 配置Vue項目文件
2.1 簡易方法
因此直接下載官方提供的項目，修改一下Key就能用。
1、進(jìn)入網(wǎng)址：
https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue
點擊“下載Vue3組件完整代碼”。
2、修改Key
進(jìn)入工程，點擊MapContainer.vue，添加自己的Key。
3、連接服務(wù)器
調(diào)試窗口輸入：
npm install
npm run dev
進(jìn)入網(wǎng)址可以看到地圖。
2.2 手動編寫
這里編寫一些搜索地點并能顯示地圖的小demo。
2.2.1 構(gòu)建項目
終端輸入：
npm create vue@latest
輸入項目名和包名稱：
gaodeMap_demo
進(jìn)入工程：
cd gaodeMap_demo
安裝npm
npm install
測試：
npm run dev
可以看到如下網(wǎng)頁：
2.2.2 下載包
2.2.2.1 按需導(dǎo)入element-plus包
安裝unplugin-vue-components、unplugin-auto-import：
npm install -D unplugin-vue-components unplugin-auto-import
修改vite.config.js配置文件：
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
官方鏈接：
https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5
2.2.2.2 導(dǎo)入高德@amap/amap-jsapi-loader
命令行終端輸入：
npm i @amap/amap-jsapi-loader --save
2.2.2 編寫程序
項目中新建MapContainer.vue，用作地圖組件。
代碼如下：
// MapContainer.vue
<template>
<div>Handbook.vue的組件</div>
<el-input v-model="positionInput"
id="searchInputId"
class="common-layout"
size="small"
placeholder="輸入關(guān)鍵詞搜索位置"
style="height:25px;width:26%;margin-left:1%;"/>
<el-button>搜索</el-button>
<div class="gdmap-container">
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted,ref } from 'vue';
export default{
setup(){
const positionInput = ref('');
function initMap(){
window._AMapSecurityConfig = {
securityJsCode: "5e*********************7e7", // 密鑰
}; // 重要！
AMapLoader.load({
key: "a62*************************92b", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [
'AMap.AutoComplete',
'AMap.PlaceSearch'
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
var map = new AMap.Map("container",{
resizeEnable: true,
viewMode: "3D", // 是否為3D地圖模式
zoom: 8, // 初始化地圖級別
center: [118,30], // 初始化地圖中心點位置
});
var autoOptions = {
input:"searchInputId"
};
var auto = new AMap.AutoComplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map:map
})
auto.on("select",select);
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //關(guān)鍵字查詢查詢
}
})
}
onMounted(() => {
console.log("onmounted");
initMap();
});
onUnmounted(() => {
map?.destroy();
});
return{
positionInput,
}
}
}
</script>
<style scoped>
.gdmap-container{
width: 500px;
height:300px;
}
#container {
padding: 0px;
margin: 0px;
border:1px solid gray;
width: 100%;
height: 100%;
}
</style>
2.2.3 引用
為了方便這里直接修改app.vue。
刪除不需要的vue，添加
<template>
<div>
<MapContainer />
</div>
</template>
<script setup>
import MapContainer from './MapContainer.vue';
</script>
<style scoped>
</style>
2.2.4 運行
命令行輸入：
npm run dev
輸入框編輯文字，可以看到如下畫面：
搜索按鈕暫時沒寫回調(diào)函數(shù)，將就著用。
3 問題小結(jié)
1、地圖無法顯示：地圖的塊元素div給的參數(shù)是id="container"，樣式中需要使用#container。
2、本人在編程的時候出現(xiàn)了無法自動補(bǔ)全的情況，錯誤碼是INVALID_USER_SCODE，官方說明是安全碼未通過驗證，因此添加了在代碼中添加了安全密鑰：
window._AMapSecurityConfig = {
securityJsCode: "「你申請的安全密鑰」",
};
添加后，代碼能夠成功運行，input輸入窗口下方出現(xiàn)了自動補(bǔ)全文字選項。
3、輸入框最好使用el-input，其次是input的id前面不要加:，否則就是另外一個意思（我也是初學(xué)者，說不太清）。AMap的自動補(bǔ)全是綁定這個id的。
官網(wǎng)鏈接：文章來源：http://www.zghlxwxcb.cn/news/detail-798050.html
https://lbs.amap.com/api/javascript-api-v2/guide/abc/load文章來源地址http://www.zghlxwxcb.cn/news/detail-798050.html
到了這里，關(guān)于Vue3+Vite連接高德地圖JS API——地圖顯示、輸入搜索的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
