首先 安装依赖
cnpm i @amap/amap-jsapi-loader --save
<script setup>
import { onMounted, reactive, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
const map = ref(null)
const mapData = reactive({
map: {},
keyword: '',
selectedLocation: {},
selectedAddress: '',
marker: null, // 用于存储选中位置的标记
})
const lng = ref(0)
const lat = ref(0)
onMounted(() => {
window._AMapSecurityConfig = {
securityJsCode: '', // 密钥
}
AMapLoader.load({
key: '', // key值
version: '1.4.15',
plugins: ['AMap.PlaceSearch'],
})
.then((AMap) => {
const mapInstance = new AMap.Map('container', {
viewMode: '2D',
zoom: 11,
center: [116.397033, 39.917606],
layers: [
new AMap.TileLayer.RoadNet(),
new AMap.TileLayer.WMS({
url: 'https://ahocevar.com/geoserver/wms',
blend: false,
tileSize: 512,
params: {
LAYERS: 'topp:states',
VERSION: '1.3.0',
},
}),
],
scrollWheel: true, // 启用滚动缩放
})
mapInstance.on('click', (e) => {
lng.value = e.lnglat.getLng()
lat.value = e.lnglat.getLat()
// 移除之前的标记
if (mapData.marker) {
mapData.marker.setMap(null)
}
// 创建新的标记
const marker = new AMap.Marker({
position: [lng.value, lat.value],
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 选中位置的图标
offset: new AMap.Pixel(-15, -30), // 调整图标的偏移位置
})
// 将标记添加到地图
marker.setMap(mapInstance)
// 存储选中位置的标记
mapData.marker = marker
// 将地图中心设置为选中位置
mapData.map.setCenter([lng.value, lat.value])
})
mapData.map = mapInstance
})
.catch((e) => {
console.log(e)
})
})
function search() {
if (mapData.keyword) {
AMapLoader.load({
key: '',
version: '1.4.15',
plugins: ['AMap.PlaceSearch'],
})
.then((AMap) => {
const placeSearch = new AMap.PlaceSearch({
city: '全国', // 请根据实际情况设置城市
map: mapData.map,
})
placeSearch.search(mapData.keyword, (status, result) => {
console.log(result) // 输出完整的搜索结果
if (status === 'complete') {
const pois = result.poiList.pois
if (pois.length > 0) {
const { location } = pois[0]
// 移除之前的标记
if (mapData.marker) {
mapData.marker.setMap(null)
}
// 创建新的标记
const marker = new AMap.Marker({
position: location,
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
offset: new AMap.Pixel(-15, -30),
})
// 将标记添加到地图
marker.setMap(mapData.map)
// 存储选中位置的标记
mapData.marker = marker
// 将地图中心设置为选中位置
mapData.map.setCenter(location)
}
}
else {
console.log('搜索失败或无结果')
}
})
})
.catch((e) => {
console.log(e)
})
}
}
function zoomIn() {
mapData.map.zoomIn()
}
function zoomOut() {
mapData.map.zoomOut()
}
</script>
<template>
<div>
<input v-model="mapData.keyword" style="width: 80%; height: 30px;" @keydown.enter="search">
<button @click="search">
搜索
</button>
<button @click="zoomIn">
放大
</button>
<button @click="zoomOut">
缩小
</button>
<div id="container" class="map" style="height: 400px; border-radius: 5px;" />
<div>经度:{{ lng }}</div>
<div>经度:{{ lat }}</div>
</div>
</template>
<style scoped>
.map {
width: 100%;
}
</style>