VUE——Vue-amap实现POI搜索

最新推荐文章于 2024-07-23 15:55:45 发布
最新推荐文章于 2024-07-23 15:55:45 发布
阅读量1.1w 收藏 12
点赞数 3
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36111804/article/details/80885523
版权
本文介绍了如何在Vue项目中使用Vue-amap插件实现POI（Point of Interest）搜索功能。通过点击搜索按钮展示搜索框，输入文字后触发自动联想，显示搜索建议。用户选择建议后，地图会更新中心点到所选位置。实现过程中利用了Vue-amap提供的PoiPicker组件，并提供了相关的配置选项和JS代码示例。
摘要由CSDN通过智能技术生成

大致效果：

点击搜索按钮，出现搜索框

        

搜索框里输入文字，自动联想并提示搜索结果，供选择

        

点击某个提示结果，进入详细搜索结果

        

选择想要的结果，搜索结果隐藏，搜索框隐藏，地图中心点变为选择的地方

        

这里使用官方UI里面的misc/PoiPicker

new PoiPicker的时候进行配置，具体配置文档请参照：点击打开链接

组件代码：

<template>
  <div>
    <button @click="init
最低0.47元/天 解锁文章
kindCoder
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 5348
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
高德地图poi 周边搜索及关键字搜索
04-19
高德地图poi 周边搜索及关键字搜索 Android 6.0系统默认为targetSdkVersion小于23的应用默认授予了所申请的所有权限，所以如果您APP设置的targetSdkVersion低于23，在运行时也不会崩溃。
vue高德地图POI关键字搜索定位
YL
06-20 1393
最近在项目中遇到了关于地图的问题，首先为了满足需求从而使用的是JSAPI为2.0版本的。需求是根据关键字搜索定位到该位置。值得注意的是在使用 AMap.Event.addListener时 Event一定要大写的E，不然页面会报错。在地图上定义一个输入框，根据输入的位置进行提示，然后点击后跳转到对应的位置并打点标记。JSAPI主要使用这两个。
Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能
最新发布
cdfdfgrd的博客
07-23 980
Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能
vue-amap 高德地图实现地图选址带搜索功能
weixin_44235736的博客
09-17 1394
vue-amap 高德地图实现地图选址带搜索功能 组件文档地址：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install 第一步：安装配置 在main.js import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: '***************', // 这里写你申请的高德地图的key plugin: ['AMap.Auto
vue中使用高德地图amap
weixin_34221276的博客
01-03 312
1.安装插件:npm install vue-amap --save2.main.js中import AMap from 'vue-amap'Vue.use(AMap);3.index.html文件中<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=c76c4e9a861fe1f715c...
vue2集成amap（高德地图）位置搜索和定位
xinzi11243094的博客
06-05 7705
有几个注意事项是，我是2017-6-15开发的，目前的vue-amap api太简陋了，而且定制化很恼火，所以建议集成vue-amap后，再结合官方文档。随便值得高兴的是，终于摆脱了百度地图恶心的api，不需要头部直接引用百度地图那个js了，因为我整个项目就只有一个页面要用到地图功能，全局引入太恶心了。下面进入正题：1. 到高德地图注册一个帐号，创建应用，创建一个key2.  安装[plain] ...
饿了么ElementUI和高德vue-amap实现自动定位和手动选择
weixin_45102492的博客
11-21 1186
vue-amap参考地址： https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install ElementUI参考 https://element.eleme.cn/#/zh-CN/component/quickstart 首先安装依赖 npm install vue-amap --save 在项目的main.js下进行全局引入 //高德地图 import VueAMap from "vue-amap"; Vue.use(VueAMap) V
vue-amap的使用
多一点开心
10-14 7201
vue-amap的使用一、效果图二、安装三、使用 一、效果图 二、安装 第一步：安装 npm install vue-amap --save 第二步：入口main.js文件配置 import VueAMap from "vue-amap"; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: "95fa72137f4263f8e64ae01f766ad09c", plugin: [ "AMap.Autocomplete", "AMap
vue项目中调用高德地图vue-amap 插件 的AMap.PlaceSearch简用
Navy
06-25 3559
vue项目调用高德地图vue-amap 插件 的AMap.PlaceSearch简用 结合 elementui 的 el-input 直接下拉选取地点 不展示地图 1.下载 npm install vue-amap --save 2.直接在mian.js import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '自己的高德key',
vue-picker
10-26
用vue模拟实现的移动端选择器，仿照ios原生选择器实现
高德地图集成:定位功能 关键字检索POI 获取附近位置列表
09-20
本demo 集成了高德地图定位和POI搜索附近位置列表功能,类似于朋友圈当前位置获取;;;:::::
（可直接复制使用）vue2+高德地图poi搜索和高德组件，可以地图选点，经纬度，比例尺，卫星图，路网，路况等等
大雾起了清晨
05-18 6012
效果图（踩了好多坑，跟着b站一个up主写的） 1.注册高德开发者平台的应用 注册个人开发者以后进入控制台（按下面顺序进行） 2.引入 （1）首先安装高德地图的依赖洒 npm i @amap/amap-jsapi-loader --save （2）复制代码 <template> <div> <div class="mapSearch"> <input placehol...
a-map高德
酷酷的旭
07-19 5860
<template> <!-- 用户分布 --> <div style="height:900px;"> <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo"> <!-- <el-amap-marker v-f...
vue-amap 实现高德地图定位 + 搜索 +回显
Tkings233的博客
02-10 8950
html： <template> <div class="amap-page-container"> <!-- 搜索条件 是个对象searchOption 属性是city城市名，citylimit：false； 搜索回调函数 --> <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result.
android js 选择列表,输入框选择POI点-POI选点-示例中心-JS API UI 组件示例 | 高德地图API...
weixin_36255837的博客
05-29 287
输入框选择POI点html,body,#container {width: 100%;height: 100%;margin: 0px;font-size: 13px;}#pickerBox {position: absolute;z-index: 9999;top: 50px;right: 30px;width: 300px;}#pickerInput {width: 200px;padding...
vue使用vue-amap 高德地图进行选点和搜索
weixin_45356397的博客
01-17 5574
vue使用vue-amap进行地图点的搜索和点击选点 npm install vue-amap --save //下载npm 包 在main.js主文件中进行引用 import VueAMap from "vue-amap"; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: "XXXXXXXXXXXXXXXXXX",//高德开放平台申请的key值 plugin: [ "AMap.Autocomplete", //输入提示插.
vue使用vue-amap插件（高德地图插件实现定位、搜索、marker标记点）
热门推荐
ccyolo的博客
04-20 1万+
实现简单功能记录一下，有问题的话麻烦指出谢谢！ 需求：进入地图定位当前位置，并标记，点击位置显示标记点，上一个标记点消失，搜索框输入地址，显示位置并标记。 1.在高德开发者平台申请key； 2.安装vue-amap； npm install vue-amap --save 3.在项目main.js中引入vue-amap import VueAMap from 'vue-amap'; //引入高德 VueAMap.initAMapApiLoader({ key: '写入申请的key', //插
vue-amap实现高德离线地图
05-25
实现高德离线地图，需要先下载离线地图数据，在 Vue-amap 中引入并配置离线地图数据即可。 以下是实现步骤： 1. 下载离线地图数据：在高德官网下载离线地图数据，下载后解压缩得到离线地图数据文件夹。 2. 在 Vue...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值