本次开发使用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是真乃人类之光