本次開發使用deepseek 簡直如虎添翼得心應手 生成模擬數據、解決報錯那真是嘎嘎地
在 Vue + Element UI 項目中引入高德地圖
具體實現步驟：
高德開放平臺：注冊賬號 → 進入控制臺 → 創建應用 → 獲取 Web端(JS API)的Key
https://lbs.amap.com/
這里需要注意：key的類型不要選錯，我第一次申請的web服務端Key，無法實現搜索具體地址功能
后來重新申請 Key為Web端(JSAPI)Key才可以
（這個錯誤 USERKEY_PLAT_NOMATCH 表示你的高德地圖 Key 與當前使用的平臺不匹配）
注冊賬號 → 應用管理 → 我的應用 → 創建應用 → 新建應用 → 添加key
// 密鑰
window._AMapSecurityConfig = {securityJsCode: '你在高德開放平臺申請的安全密鑰'
}
// keythis.AMap = await AMapLoader.load({key: '你在高德開放平臺申請的key',version: '2.0',plugins: [ // 需要使用的插件'AMap.PlaceSearch', 'AMap.AutoComplete','AMap.Geocoder','AMap.Marker']})下載依賴
npm install @amap/amap-jsapi-loader --save
我使用的版本 "@amap/amap-jsapi-loader": "^1.0.1"
實現可搜索具體地址+可標注地點的地圖
index.vue文件
<template><div class="page"><AMap></AMap></div>
</template><script>
import AMap from './AMap.vue'export default {components: { AMap }
}
</script>AMap.vue文件
<template><div class="map-container"><div class="map-box"><div class="search-box"><el-inputv-model="keyword"placeholder="搜索模式"prefix-icon="el-icon-search"clearable@input="handleSearch"@focus="showResults = true"></el-input><div v-show="showResults && searchResults.length > 0" class="search-results"><div v-for="item in searchResults" :key="item.id"class="result-item"@click="selectLocation(item)"><div class="name">{{ item.name }}</div><div class="address">{{ item.district }}{{ item.address }}</div></div></div></div><div id="map-container" style="width: 100%; height: 830px;"></div></div></div>
</template><script>
import AMapLoader from '@amap/amap-jsapi-loader'
import { debounce } from 'lodash'// 密鑰
window._AMapSecurityConfig = {securityJsCode: '你自個的密鑰'
}export default {name: 'AMapSearch',data() {return {map: null,AMap: null,placeSearch: null,autoComplete: null,marker: null,keyword: '',searchResults: [],showResults: false}},mounted() {this.initMap()},methods: {async initMap() {try {this.AMap = await AMapLoader.load({key: '你自個的key',version: '2.0',plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete','AMap.Geocoder','AMap.Marker']})this.map = new this.AMap.Map('map-container', {viewMode: '2D',zoom: 12,center: [116.397428, 39.90923]})this.autoComplete = new this.AMap.AutoComplete({city: '全國',input: 'keyword-input'})this.placeSearch = new this.AMap.PlaceSearch({map: this.map,pageSize: 10,city: '全國'})this.map.on('click', (e) => {this.addMarker(e.lnglat)this.reverseGeocode(e.lnglat)})} catch (error) {console.error('地圖初始化失敗:', error)}},handleSearch: debounce(function() {if (!this.keyword.trim()) {this.searchResults = []return}this.autoComplete.search(this.keyword, (status, result) => {if (status === 'complete' && result.tips) {this.searchResults = result.tips.map(item => ({...item,address: Array.isArray(item.address) ? item.address[0] : item.address}))} else {this.searchResults = []console.warn('搜索失敗:', result)}})}, 500),selectLocation(item) {this.keyword = item.namethis.showResults = falseif (item.location) {const lnglat = new this.AMap.LngLat(item.location.lng, item.location.lat)this.map.setCenter(lnglat)this.addMarker(lnglat)} else if (item.district && item.address) {this.placeSearch.search(item.district + item.address, (status, result) => {if (status === 'complete' && result.poiList.pois.length) {const poi = result.poiList.pois[0]const lnglat = new this.AMap.LngLat(poi.location.lng,poi.location.lat)this.map.setCenter(lnglat)this.addMarker(lnglat)}})}},addMarker(lnglat) {if (this.marker) {this.map.remove(this.marker)}this.marker = new this.AMap.Marker({position: lnglat,icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'})this.map.add(this.marker)this.map.setZoom(16)},reverseGeocode(lnglat) {const geocoder = new this.AMap.Geocoder()geocoder.getAddress(lnglat, (status, result) => {if (status === 'complete' && result.regeocode) {this.keyword = result.regeocode.formattedAddress}})}}
}
</script><style scoped>.map-container {position: relative;width: 100%;height: 100%;}.map-box {position: relative;width: 100%;height: 600px;}.search-box {position: absolute;top: 20px;left: 20px;z-index: 999;width: 300px;background: white;border-radius: 4px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.search-results {max-height: 300px;overflow-y: auto;border: 1px solid #ebeef5;border-top: none;border-radius: 0 0 4px 4px;}.result-item {padding: 10px;cursor: pointer;border-bottom: 1px solid #ebeef5;}.result-item:hover {background-color: #f5f7fa;}.result-item .name {font-weight: bold;margin-bottom: 5px;}.result-item .address {font-size: 12px;color: #909399;}
</style>這次功能開發 首次完全依賴deepseek 誒嘛真香 比自己找文檔文章吭哧吭哧硬寫方便多了
ai是真乃人類之光
生成假數據炒雞方便 以后要多多用！
