vue中使用高德地图根据搜索结果添加 marker（ 使用 PlaceSearch 进行关键字搜索）

最新推荐文章于 2024-09-02 14:32:24 发布
最新推荐文章于 2024-09-02 14:32:24 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： vue 高德
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_zhhjgy/article/details/111705299
版权

需要注意的是搜索厕所时，传入search方法中的关键词必须加上具体位置，比如具体的景区‘故宫厕所’，才可以，不然就是整个市的厕所

// 厕所
    toiletSelect() {
   
      var placeSearch = new AMap.PlaceSearch({
   
        // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
        city: '010', // 兴趣点城市
最低0.47元/天 解锁文章
程序媛gy
关注
专栏目录
vue2/3 - 实现高德地图按关键字搜索功能，在vue项目中使用高德地图实现搜索框关键字联想，用户在输入框输入关键词后下方出现推荐联想地址并点击前往功能（详细可运行示例源码，一键复制开箱即用）
高级前端工程师
11-19 2897
vue，vue高德地图，vue网站高德地图详细教程，vue高德地图搜索框功能，vue实现高德地图搜索关键字下拉相关地址，vue高德地图搜索框下方出现相关联动地址，vue网页使用高德地图关键字搜索功能，Vue项目使用高德地图搜索功能，vue使用高德地图API实现输入关键字联想地址，vue高德地图实现关键字搜索，vue高德地图搜索框关键字联想，高德地图关键词搜索，点击选点，vue引入高德地图-实现自定义搜索框搜索数据，vue如何实现高德地图搜索功能，vue2引入高德地图-实现自定义搜索框搜索数据，vue项目使用
Vue3使用高德地图apijs时添加位置搜索并显示结果
qq_50931953的博客
06-27 1777
注意：示例代码为vue3，高德地图2.0，Elementui-plus。
vue使用高德地图实现实时天气预报功能
总结前端开发中遇到的问题，分享前端知识
05-31 2123
需求：根据手机定位功能，使用高德地图实现定位当前城市的天气预报功能。
pc端vue封装高德地图实现定位 PlaceSearch搜索
LRQQHM的博客
01-23 1170
【代码】vue封装高德地图实现定位 PlaceSearch搜索。
vue2使用高德地图api+标记多个标记点、绘制折线（小白总结版
最新发布
Jdanne的博客
09-02 521
vue2使用高德地图api+标记多个标记点、绘制折线（小白总结版
vue使用高德地图搜索以后自动生成的marker的点击事件
Tuzki的小窝
07-25 1576
vue使用高德地图搜索以后自动生成的marker的点击事件。在确认初始化地图以后。下面是点击后的打印结果。
vue中使用高德地图
m0_47958800的博客
06-27 348
在vue中使用高德地图
高德地图 AMap.PlaceSearch
ooiuy450的专栏
03-30 2万+
AMap.PlaceSearch地点搜索服务，提供某一特定地区的位置查询服务。PlaceSearch构造函数的参数为可选，表达为参数对象PlaceSearchOptions。PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。高德地图为我们提供了某一地区的查询服务，通过
vue 高德地图搜索功能_vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)...
weixin_39976413的博客
12-19 1567
1.首先在index.html引入高德地图的秘钥。如图：注意：如果使用关键字搜索功能要加上plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错2. 定位功能，代码如下：const map = new AMap.Map(this.$refs.container, {resizeEnable: true}) // 创建Map实例const op...
html高德搜索引擎,vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)...
weixin_31302227的博客
06-09 568
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)发布时间：2020-09-26 00:02:16来源：脚本之家阅读：164作者：MrsTing1.首先在index.html引入高德地图的秘钥。如图：注意：如果使用关键字搜索功能要加上plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错2. 定位功能，代码如下：const m...
vue 中使用 vue-amap(高德地图) 【'AMapUI' is not defined 】
热门推荐
weixin_42737937的博客
06-15 3万+
业务需求： 1. 点击地图获取经纬度及地址； 2.输入内容搜索获取经纬度及地址; 开始： 使用前 可以先查阅官网:vue-amap 其中比较重要的: 1. vue-amap能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德...
vue项目中调用高德地图vue-amap 插件 的AMap.PlaceSearch简用
Navy
06-25 3608
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 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式
Wang_make的博客
04-01 3732
Vue 高德地图实现添加标记，AMap.PlaceSearch 地点搜索，根据页面主题修改地图样式
vue使用高德地图aMap实现轨迹动画查询显示
总结前端开发中遇到的问题，分享前端知识
04-12 4791
vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果： 需求：根据返回的经纬度 实现轨迹动画，以下示例可以直接复制使用，记得添加自己的key、秘钥。 JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI： 1. 使用官网提供的 JSAPI Loader 进行加载； 2. 以常规 JavaScript 脚本...
vue 高德地图
Jana Jing的分享
09-10 470
1.引入高德地图 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=AK"></script> AK:是自己申请的高的appKey 2.手机端跳转到网页版高德地图 AMap.plugin(["AMap.PlaceSearch"], function () { //构造地点查询类 var placeSearch = new AMap.PlaceSear.
vue 使用高德地图的 搜索 戳点功能
qq_42164957的博客
12-14 723
vue 使用高德地图的 搜索 戳点功能
前端 vue 使用高德地图组件：（三）设置检索框使用地图插件进行位置检索定位
yssa1125001的博客
07-27 2878
地图组件在业务中往往也需要设置检索框进行位置的检索及定位，这需要用到高德的两个插件，关键字检索插件和根据关键字定位插件 完整代码如下： <template> <div class="app-container"> <div id="title">高德地图组件展示</div> <div id="searchDiv"> <el-input id="inputContent"
vue项目高德地图：循环显示marker点，自定义点图标，点击marker事件
︶￣城南花已开
11-30 3001
vue项目高德地图：循环显示marker点，自定义点图标，点击marker事件
vue项目使用高德地图的定位及关键字搜索功能
qq_40364610的博客
03-06 5092
1.首先在index.html引入高德地图的秘钥。如图： 注意：如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch，否则功能无法使用，并会报错 2. 定位功能，代码如下： const map = new AMap.Map(this.$refs.container, { resizeEnable: true }...
Vue项目中使用高德地图实现实时公交应用功能
在 Vue 项目中使用高德地图需要先导入高德地图的 SDK，有两种方式可以实现：一种是在 index 页面直接引入，另一种是异步加载。在引入 SDK 之后，需要在 Vue 项目中导入高德地图，修改 webpac.base.conf.js 文件，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值