高德地图准备工作
安装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
})
})