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'
       }
  }
}

代码:

初始化结果:

vue高德地图搜索功能_第1张图片

搜索地点:

vue高德地图搜索功能_第2张图片

地点经纬度:

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

三、总结

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

 

THE END

你可能感兴趣的:(WEB前端)