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

vue 高德地图搜索功能_vue高德地图搜索功能相关推荐

vue搜索好友_Vue实现类似通讯录功能（中）
本来想一篇文章写完,但是又截图又分析什么的,如果用一篇文章写,太长了,估计都没耐心看完,所以分成了几篇来写. 这篇主要说的是实现点击右侧字母索引,左边能自动滚动到相应城市功能. 兄弟组件联动去字母索 ...
vue 微信支付的坑_Vue实现微信支付功能遇到的坑
微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需项目用VUE+EL搭建而成,支付用EL的radio来做的微信支付推荐安装最新版微信使用支付宝推荐有支付宝账户的用户使用坑 ...
Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
vue使用高德地图画电子围栏_Vue.js 中使用高德地图定位及渲染地图
看了github上面有集成的高德地图组件,但由于项目所要用到的不多,所以决定跟着文档写一写.运行环境是vue-cli webpack 引入高德地图一般用使用vue-cli webpack最简单粗暴的 ...
高德地图很详细的用法定位搜索添加小蓝点marker 移动地图实时定位
最近项目中需要用到地图的功能,看了下需求后,不多想,直接锁定高德地图,为什么不选择百度地图呢,这里本人觉得高德地图的文档让我看起来更爽,哈哈哈,进入主题吧前题的申请key这里我就不讲啦,很简单,直接 ...
vue（移动端）使用高德地图实现精准定位
目录效果图前提准备代码展示效果图两个页面页面一(粗略定位) 点击城市进入页面二 (粗略定位),搜索框输入具体位置(以大连理工大学为例) 点击大连理工大学,回到页面一,并展示精准位置再次点 ...
高德地图实现仿qq,微信发送位置功能实现逻辑
定位获取当前位置地图中间放置大头针周边展示位置信息周边信息点击后的逻辑操作地图截屏功能实现发送图片到其他页面或者服务器获取到信息进行展示写的不好,勿喷,有疑问可以联系我qq 130888 ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
如何在vue项目中使用echarts和高德地图绘制折线和热力图
1.先下载相关的依赖,这里echarts和高德地图放到一起.(高德地图需要先去申请一个key) // The Vue build version to load with the `import` c ...

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

vue 高德地图搜索功能_vue高德地图搜索功能相关推荐

最新文章

热门文章