vue 高德地图搜索功能_vue高德地图搜索功能

一、开发环境：

vue版本：v2.5.2

vue-cli版本：v2.9.3

webpack版本：3.6.0

高德地图api版本：JavaScript API V1.4.12

二、直入主题

首先在，index.html文件中引入高德地图api

然后，更改webpack配置文件 build/webpack.base.conf.js，在module.exports中添加externals字段

module.exports = {

....

externals: {

'AMap': 'AMap'

}

}

如果是vue-cli3版本，请在项目的根目录的vue.config.js文件中修改webpack配置

// vue.config.js

module.exports = {

chainWebpack: config => {

config.externals: {

'AMap': 'AMap'

}

}

}

代码：

请输入关键字：

搜索

初始化结果：

搜索地点：

地点经纬度：

接下来根据经纬度可以实现其他功能。

三、总结

高德地图api接口比较丰富，只要开动脑筋组合使用起来，大多的需求都能实现。本次主要使用了POI搜索插件AMap.PlaceSearch，原官方的Demo中使用了AMap.AutoComplete，本次根据实际项目需求去掉了，结合了带列表的POI搜索的这个Demo,再将监听事件改为列表点选的selectChange事件，获得当前点选地点经纬度，这样将二者进行了组合一下实现了以上的搜索以及展现方式，查看AMap.PlaceSearch全部属性和方法，查看AMap.Autocomplete全部属性和方法。

THE END