前言
效果圖：
官網：
高德地圖官網，點選進入我的配置：
打包用的是webpack，vite踩坑後打算再觀望一陣
第一步：完善高德地圖api的基本配置
- 先注冊開發者賬号，進入應用管理界面，應用管理界面就是咱右上角的那個頭像，hover之後會有個彈窗，找到「應用管理」點選進入
- 找到右側的「應用管理」菜單，點開後選擇我的應用
vue3+高德地圖實作模糊搜尋功能，超詳細，不信你不會 vue3+高德地圖實作模糊搜尋功能，超詳細，不信你不會 - 點選右上角建立新應用，應用類型看自己軟體的定位
- 點選建立好應用的添加按鈕
- 設定應用配置
ps：服務平台要選 web端(JS API) ， 不要選web服務
域名不寫表示所有域都可以通路 添加完成後，中間有個key，很長一段文字的，待會要用到
第二步：在vue3項目中使用高德地圖api
- 複制剛剛建立好的key
vue3+高德地圖實作模糊搜尋功能，超詳細，不信你不會 - 在pulic/index.html 通過CDN引入高德地圖api
ps：CDN在這裡的意指通過連結加載的某些元件庫，而不是通過npm，元件通過CDN加載可以啟到一定程度的加速效果
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=粘貼剛剛複制好的key"></script> - 在項目根目錄建立檔案 vue.config.js ，注意配置檔案最好别用ts，在js檔案中粘貼以下代碼
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap' // 表示CDN引入的高德地圖
}
}
} - 建立vue檔案，粘貼以下css代碼和結構
ps:css代碼是搜尋框的樣式，高德地圖也有自帶
<template>
<div class="box">
<div id="container" style="width:500px; height:300px"></div>
<div class="info">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text" style="width:8rem;">請輸入關鍵字</span>
</div>
<input id='tipinput' type="text">
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import "~@/styles/scss/_global.scss";
.info {
padding: .5rem .7rem;
margin-bottom: 1rem;
border-radius: .25rem;
position: fixed;
top: 1rem;
background-color: white;
width: auto;
min-width: 15rem;
border-width: 0;
right: 1rem;
box-shadow: 0 2px 6px 0 rgba(240, 131, 0, .5);
.input-item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
height: 2.2rem;
border: 1px solid $themeTextColor;
border-radius: .2rem;
.input-item-prepend {
margin-right: -1px;
}
.input-item-prepend {
width: 35%;
font-size: 13px;
border-right: 1px solid $themeTextColor;
height: 100%;
display: flex;
align-items: center;
background: rgba(240, 131, 0, .1);
span {
text-align: center;
}
}
input {
width: 60%;
background: #fff;
padding: .2rem .6rem;
margin-left: .3rem;
border: none;
}
}
}
</style> - 在srcipt标簽中引入AMap（高德地圖）元件，并且在onMounted生命周期中使用，具體用意可以看代碼中的注釋
ps：不能在setup周期中使用，因為那時候DOM元素還未建立，找不到DOM元素
<script>
import AMap from 'AMap' // 引入高德地圖
import { onMounted } from 'vue'
export default {
name: 'Login',
setup () {
onMounted(() => {
const map = new AMap.Map('container', { // 這裡表示建立地圖 第一個參數表示地圖的div的id
resizeEnable: true // 表示是否在加在所在區域的地圖，如果定了别的區域，比如北京，就會預設加載北京
})
// 使用AMap插件 第一個是搜尋框插件，第二個位址資訊（經緯度名字之類）的插件
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
const autoOptions = {
// 使用聯想輸入的input的div的id
input: 'tipinput'
}
const autocomplete = new AMap.Autocomplete(autoOptions)
const placeSearch = new AMap.PlaceSearch({
city: '北京', // 預設城市，一定要有，不然沒有放大效果
map: map // 地圖，選中會有放大功能，綁定上面建立的地圖即可
})
AMap.event.addListener(autocomplete, 'select', function(e) {
console.log(e.poi.location) // 擷取選中的的位址的經緯度
placeSearch.search(e.poi.name)
})
})
})
return {
}
}
}
</script> 完結撒花，附上完整代碼
<template>
<div class="box">
<div id="container" style="width:500px; height:300px"></div>
<div class="info">
<div class="input-item">
<div class="input-item-prepend">
<span class="input-item-text" style="width:8rem;">請輸入關鍵字</span>
</div>
<input id='tipinput' type="text">
</div>
</div>
</div>
</template>
<script>
import AMap from 'AMap' // 引入高德地圖
import { onMounted } from 'vue'
export default {
name: 'Login',
setup () {
onMounted(() => {
const map = new AMap.Map('container', { // 這裡表示建立地圖 第一個參數表示地圖的div的id
resizeEnable: true // 表示是否在加在所在區域的地圖，如果定了别的區域，比如北京，就會預設加載北京
})
// 使用AMap插件 第一個是搜尋框插件，第二個位址資訊（經緯度名字之類）的插件
AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function() {
const autoOptions = {
// 使用聯想輸入的input的div的id
input: 'tipinput'
}
const autocomplete = new AMap.Autocomplete(autoOptions)
const placeSearch = new AMap.PlaceSearch({
city: '長沙',
map: map
})
AMap.event.addListener(autocomplete, 'select', function(e) {
console.log(e.poi.location) // 擷取選中的的位址的經緯度
placeSearch.search(e.poi.name)
})
})
})
return {
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/scss/_global.scss";
.info {
padding: .5rem .7rem;
margin-bottom: 1rem;
border-radius: .25rem;
position: fixed;
top: 1rem;
background-color: white;
width: auto;
min-width: 15rem;
border-width: 0;
right: 1rem;
box-shadow: 0 2px 6px 0 rgba(240, 131, 0, .5);
.input-item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
height: 2.2rem;
border: 1px solid $themeTextColor;
border-radius: .2rem;
.input-item-prepend {
margin-right: -1px;
}
.input-item-prepend {
width: 35%;
font-size: 13px;
border-right: 1px solid $themeTextColor;
height: 100%;
display: flex;
align-items: center;
background: rgba(240, 131, 0, .1);
span {
text-align: center;
}
}
input {
width: 60%;
background: #fff;
padding: .2rem .6rem;
margin-left: .3rem;
border: none;
}
}
}
</style>
轉載請@，互相尊重謝謝！！