要在
Vue2
中实现高德地图的
搜索功能，可以按照以下步骤操作：
1. 安装
高德地图JavaScript API
在
Vue2
项目中，可以通过npm安装
高德地图JavaScript API：
```bash
npm install @amap/amap-jsapi-loader --save
```
2. 创建
高德地图组件
在
Vue2
项目中，可以创建一个
高德地图组件，用于显示地图和
搜索结果：
```
vue
<template>
<div id="map-container"></div>
</template>
<script>
import { AMapLoader } from '@amap/amap-jsapi-loader';
export default {
name: 'Ma
pContainer',
props: {
apiKey: String, //
高德地图API的key
searchKeywords: String, //
搜索关键字
},
data() {
return {
map: null, // 地图对象
markers: [], // 地图标记
};
},
mounted() {
this.initMap();
},
methods: {
async initMap() {
const loader = new AMapLoader({
key: this.apiKey,
version: '2.0',
});
const { AMap } = await loader.load();
this.map = new AMap.Map('map-container');
if (this.searchKeywords) {
this.search(this.searchKeywords);
}
},
async search(keywords) {
const { AMap } = await new AMapLoader({
key: this.apiKey,
version: '2.0',
}).load();
const placeSearch = new AMap.PlaceSearch({
map: this.map,
});
placeSearch.search(keywords, (status, result) => {
if (status === 'complete' && result.info === 'OK') {
this.markers = result.poiList.pois.map((poi) => {
const marker = new AMap.Marker({
position: poi.location,
title: poi.name,
});
marker.setMap(this.map);
return marker;
});
}
});
},
},
watch: {
searchKeywords(newVal) {
this.search(newVal);
},
},
};
</script>
<style>
#map-container {
width: 100%;
height: 100%;
}
</style>
```
3. 在父组件
中使用高德地图组件
在父组件
中，可以
使用上述
高德地图组件，并传入
高德地图API的key和
搜索关键字：
```
vue
<template>
<div>
<
input v-model="searchKeywords" placeholder="请
输入关键字搜索地图" />
<Ma
pContainer apiKey="your_amap_api_key" :searchKeywords="searchKeywords" />
</div>
</template>
<script>
import Ma
pContainer from './Ma
pContainer.
vue';
export default {
name: 'App',
components: {
Ma
pContainer,
},
data() {
return {
searchKeywords: '',
};
},
};
</script>
```
这样就可以在
Vue2
中实现高德地图的
搜索功能。
用户在
输入框中输入关键字后，组件会自动
搜索地图，并在地图上显示
搜索结果。
该专栏为热销专栏榜 第65名
订阅专栏 解锁全文
709
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
