vue高德地图实现关键字搜索

高德地图准备工作

安装amap
cnpm国内安装比npm更快些；

cnpm install vue-amap --save

main.js
配置amap的基础配置项

import GaodeMap from 'vue-amap'
Vue.use(GaodeMap)
GaodeMap.initAMapApiLoader({
   key: 'testkey', // 这里填写你申请的key
   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], // 使用到的工具
   v: '1.4.4', // 版本号
   uiVersion: '1.0'
})

.eslintrc.js
插入全局变量防止报错，如下代码

globals: {
   AMap: true,
   AMapUI: true
}

关键字搜索

HTML部分代码

<el-amap ref="map" style="width:500px;height:360px" />
<div id="address-list" style="width:200px;height:300px" />

JavaScript部分代码

var map = this.$refs.map.$amap
AMap.service(['AMap.PlaceSearch'], () => {
   var placeSearch = new AMap.PlaceSearch({ // 构造地点查询类
       pageSize: 5, // 单页显示结果条数
       pageIndex: 1, // 页码
       citylimit: true, // 是否强制限制在设置的城市内搜索
       map: map, // 展现结果的地图实例
       panel: 'address-list', // 结果列表将在此容器中进行展示。
       autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
   })
   // 关键字查询
   placeSearch.search(this.form.address, (status, result) => {
       // 查询成功时，result即对应匹配的POI信息
   })
   // 监听选中节点事件
   AMap.event.addListener(placeSearch, 'selectChanged', (SelectChangeEvent) => {
       // 获取节点信息自行处理逻辑代码
       this.mark = SelectChangeEvent.selected.data
   })
})