当前位置: 首页 > news >正文

【百度 JavaScript API v3.0】LocalSearch 位置检索、Autocomplete 结果提示

地名检索移动到指定坐标

需求

在输入框中搜索,在下拉列表中浮动,右侧出现高亮的列表集。选中之后移动到指定坐标。

技术点

官网地址: JavaScript API - 快速入门 | 百度地图API SDK

开发文档:百度地图JSAPI 3.0类参考

实现

第一步:在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步:组件中使用

<template><div style="display: flex"><div><!-- 地图 --><div id="map"></div><!-- 搜索框 --><div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div></div><!-- 右侧高亮值列表 --><ul class="list"><li v-for="(item,index) in list" :key="index"><p>{{ item.index }}: {{ item.val }}</p></li></ul></div>
</template><script>
export default {data() {return {map: null,point: null,list: []};},mounted() {let that = thisthis.map = new BMap.Map("map");this.point = new BMap.Point(116.8414, 39.925)this.map.centerAndZoom(this.point, 17);this.map.enableScrollWheelZoom();//建立一个自动完成的对象var ac = new BMap.Autocomplete({    "input" : "suggestId","location" : this.map});//鼠标hover下拉列表ac.addEventListener("onhighlight", function(e) {  let val = e.toitem.valuethat.list.push({index: e.toitem.index,val: val.province + val.city +  val.district +  val.street +  val.business})});// 鼠标点击下拉列表ac.addEventListener("onconfirm", function(e) {    var v = e.item.value;var keyword = v.province +  v.city +  v.district +  v.street + v.business;//清除地图上所有覆盖物that.map.clearOverlays();    //智能搜索var local = new BMap.LocalSearch(that.map, { onSearchComplete: function (){var p = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p));    //添加标注}});local.search(keyword);});},
};
</script><style>
#map {width: 300px;height: 300px;
}
</style>

解析

设置一个自动完成类

<input type="text" id="suggestId"" value="百度"/></div>
//建立一个自动完成的对象
var ac = new BMap.Autocomplete({    "input" : "suggestId","location" : this.map
});

 下拉列表展示,悬浮后右侧展示高亮值的列表

//鼠标hover下拉列表
ac.addEventListener("onhighlight", function(e) {  let val = e.toitem.valuethat.list.push({index: e.toitem.index,val: val.province + val.city +  val.district +  val.street +  val.business})
});

 onhighlight事件的返回值e:

下拉列表显示后,点击某一项进行智能搜索

// 鼠标点击下拉列表
ac.addEventListener("onconfirm", function(e) {    var v = e.item.value;var keyword = v.province +  v.city +  v.district +  v.street + v.business;//清除地图上所有覆盖物that.map.clearOverlays();    //智能搜索var local = new BMap.LocalSearch(that.map, { onSearchComplete: function (){var p = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果that.map.centerAndZoom(p, 18);that.map.addOverlay(new BMap.Marker(p));    //添加标注}});local.search(keyword);
});

 

 

 

圆形区域内检索

需求

在圆形区域内检索,每页5条搜索结果。遍历所有结果后得到全部结果,然后添加所有的marker点。

技术点

官网地址: JavaScript API - 快速入门 | 百度地图API SDK

开发文档:百度地图JSAPI 3.0类参考

实现

第一步:在public的index.html中引入

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak值" type="text/javascript"></script>

第二步:组件中使用

<template><div><div id="map"></div><p>{{ info }}</p></div>
</template><script>
export default {data() {return {map: null,point: null,info: ''};},mounted() {let that = thisthis.map = new BMap.Map("map");this.point = new BMap.Point(116.331398,39.897445)this.map.centerAndZoom(this.point, 17);this.map.enableScrollWheelZoom();// 范围var circle = new BMap.Circle(this.point, 1000, {fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});that.map.addOverlay(circle);circle.disableMassClear();// 检索点var ResultArray = [];var local = new BMap.LocalSearch(that.map,{renderOptions : { map : that.map,},pageCapacity : 5,onMarkersSet:function (array) { console.log('标注添加完成后',array);},onInfoHtmlSet:function (LocalResultPoi) { console.log('标注气泡内容创建后',LocalResultPoi);},onResultsHtmlSet:function (element) {console.log('结果列表添加完成后',element);},onSearchComplete : function(results) {console.log('检索完成后',results)// 获取当前搜索总共有多少条结果var totalPages = results.getNumPages();//总页数var currPage = results.getPageIndex();// 当前第几页if (currPage < totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage + 1); } else {// 已经到达最后一页结果ResultArray.push(...local.getResults().Ir);that.map.clearOverlays();for (var store of ResultArray){var marker = new BMap.Marker(store.point);that.map.addOverlay(marker);}that.info = "全部结果有:" + ResultArray.length + "------原本搜索结果有:" + results.getNumPois() + "------最近检索poi条数:" + results.getCurrentNumPois()}},});local.searchNearby('餐饮',that.point,1000);},
};
</script>
<style>
#map {width: 1300px;height: 1300px;
}
</style>

解析

在地图中先绘制圆形区域

circle.disableMassClear(); 保留这块覆盖物不被删除

// 范围
var circle = new BMap.Circle(this.point, 1000, {fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3
});
that.map.addOverlay(circle);
circle.disableMassClear();

onMarkersSet 检索完成后

 

 onInfoHtmlSet 标注气泡内容创建后

 onMarkersSet 标注添加完成后

 获取当前搜索总共有多少条结果

pageCapacity : 5, 每页展示条数 

// 获取当前搜索总共有多少条结果
var totalPages = results.getNumPages();//总页数
var currPage = results.getPageIndex();// 当前第几页
if (currPage < totalPages - 1) {ResultArray.push(...local.getResults().Ir);local.gotoPage(currPage + 1); 
} else {// 已经到达最后一页结果ResultArray.push(...local.getResults().Ir);that.map.clearOverlays();for (var store of ResultArray){var marker = new BMap.Marker(store.point);that.map.addOverlay(marker);}that.info = "全部结果有:" + ResultArray.length + "------原本搜索结果有:" + results.getNumPois() + "------最近检索poi条数:" + results.getCurrentNumPois()
}

相关文章:

【百度 JavaScript API v3.0】LocalSearch 位置检索、Autocomplete 结果提示

地名检索移动到指定坐标 需求 在输入框中搜索&#xff0c;在下拉列表中浮动&#xff0c;右侧出现高亮的列表集。选中之后移动到指定坐标。 技术点 官网地址&#xff1a; JavaScript API - 快速入门 | 百度地图API SDK 开发文档&#xff1a;百度地图JSAPI 3.0类参考 实现 …...

运用Facebook投放,如何制定有效的竞价策略?

广告投放中&#xff0c;我们经常会遇到一个问题&#xff0c;就是不知道什么样的广告适合自己的业务。其实&#xff0c;最简单的方法就是根据我们业务本身进行定位并进行投放。当你了解了广告主所处行业及目标受众后&#xff0c;接下来会针对目标市场进行搜索和定位&#xff08;…...

大数据框架之Hadoop:HDFS(五)NameNode和SecondaryNameNode(面试开发重点)

5.1NN和2NN工作机制 5.1.1思考&#xff1a;NameNode中的元数据是存储在哪里的&#xff1f; 首先&#xff0c;我们做个假设&#xff0c;如果存储在NameNode节点的磁盘中&#xff0c;因为经常需要进行随机访问&#xff0c;还有响应客户请求&#xff0c;必然是效率过低。因此&am…...

计算机网络 - 1. 体系结构

目录概念、功能、组成、分类概念功能组成分类分层结构概念总结OSI 七层模型应用层表示层会话层传输层网络层数据链路层物理层TCP/IP 四层模型OSI 与 TCP/IP 相同点OSI 与 TCP/IP 不同点为什么 TCP/IP 去除了表示层和会话层五层参考模型概念、功能、组成、分类 概念 &#x1f…...

银行业上云进行时,OLAP 云服务如何解决传统数仓之痛?

本文节选自《中国金融科技发展概览&#xff1a;创新与应用前沿》&#xff0c;从某国有大行构建大数据云平台的实践出发&#xff0c;解读了 OLAP 云服务如何助力银行实现技术平台化、组件化和云服务化&#xff0c;降低技术应用门槛&#xff0c;赋能业务创新。此外&#xff0c;本…...

特定领域知识图谱融合方案:文本匹配算法之预训练Simbert、ERNIE-Gram单塔模型等诸多模型【三】

特定领域知识图谱融合方案:文本匹配算法之预训练模型SimBert、ERNIE-Gram 文本匹配任务在自然语言处理中是非常重要的基础任务之一,一般研究两段文本之间的关系。有很多应用场景;如信息检索、问答系统、智能对话、文本鉴别、智能推荐、文本数据去重、文本相似度计算、自然语…...

【2023最新教程】从0到1开发自动化测试框架(0基础也能看懂)

一、序言 随着项目版本的快速迭代、APP测试有以下几个特点&#xff1a; 首先&#xff0c;功能点多且细&#xff0c;测试工作量大&#xff0c;容易遗漏&#xff1b;其次&#xff0c;代码模块常改动&#xff0c;回归测试很频繁&#xff0c;测试重复低效&#xff1b;最后&#x…...

linux备份命令小记 —— 筑梦之路

Linux dump命令用于备份文件系统。 dump为备份工具程序&#xff0c;可将目录或整个文件系统备份至指定的设备&#xff0c;或备份成一个大文件。 dump命令只可以备份ext2/3/4格式的文件系统&#xff0c; centos7默认未安装dump命令&#xff0c;可以使用yum install -y dump安…...

vue项目(vue-cli)配置环境变量和打包时区分开发、测试、生产环境

1.打包时区分不同环境在自定义配置Vue-cli 的过程中&#xff0c;想分别通过.env.development .env.test .env.production 来代表开发、测试、生产环境。NODE_ENVdevelopment NODE_ENVtest NODE_ENVproduction本来想使用上面三种配置来区分三个环境&#xff0c;但是发现使用test…...

Python 命名规范

Python 命名规范 基本规范 类型公有内部备注Packagepackage_namenone全小写下划线式驼峰Modulemodule_name_module_name全小写下划线式驼峰ClassClassName_ClassName首字母大写式驼峰Methodmethod_nameprotected: _method_name private: __method_name全小写下划线式驼峰Exce…...

操作系统——2.操作系统的特征

这篇文章&#xff0c;我们来讲一讲操作系统的特征 目录 1.概述 2.并发 2.1并发概念 2.1.1操作系统的并发性 3.共享 3.1共享的概念 3.2共享的方式 4.并发和共享的关系 5.虚拟 5.1虚拟的概念 5.2虚拟小结 6.异步 6.1异步概念 7.小结 1.概述 上一篇文章&#xff0c;我们…...

【计算机网络期末复习】第六章 应用层

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4e3;专栏定位&#xff1a;为想复习学校计算机网络课程的同学提供重点大纲&#xff0c;帮助大家渡过期末考~ &#x1f4da;专栏地址&#xff1a;https://blog.csdn.net/Newin2020/arti…...

TypeScript基本教程

TS是JS的超集&#xff0c;所以JS基础的类型都包含在内 起步安装 npm install typescript -g运行tsc 文件名 基础类型 Boolean、Number、String、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt。 1 字符串类型 字符串是使用string定义的 let a: string 123 //普…...

使用Windows API实现本地音频采集

Windows API提供了Winmm&#xff08;Windows多媒体&#xff09;库&#xff0c;其中包括了音频设备相关的函数&#xff0c;可以用来实现音频设备的枚举和测试。 下面是一个简单的示例代码&#xff0c;演示了如何使用Winmm库中的waveInGetNumDevs()函数来枚举计算机上的音频输入…...

实用的费曼学习法 | 一些思考

文章目录 一、前言二、费曼学习法CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 大数据与人工智能背景下,最重要的是:捕捉机会和快速学习的能力 一、前言 费曼学习法是美国著名的物理学家,理查德 ∙ \bullet ∙ 费曼总结出来的学习方法。 这个方法的核心是:当你学习了…...

Linux安装Docker配置docker-compose 编排工具【超详细】

一、介绍Docker Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中&#xff0c;然后发布到任何流行的 Linux或Windows操作系统的机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有…...

iTerm2 + Oh My Zsh 打造舒适终端体验

最终效果图&#xff1a; 因为powerline以及homebrew均需要安装command line tool&#xff0c;网络条件优越的同学在执行本文下面内容之前&#xff0c;可以先安装XCode并打开运行一次&#xff08;会初始化安装components&#xff09;&#xff0c;省去以后在iterm2中的等待时间。…...

【scipy.sparse】diags()和dia_matrix()的区别

【scipy.sparse】diags()和dia_matrix()的区别 文章目录【scipy.sparse】diags()和dia_matrix()的区别1. 介绍2. 代码示例2.1 sp.diags()2.1.1 第一种用法&#xff08;dataoffsets&#xff09;2.1.2 广播&#xff08;需要指定shape&#xff09;2.1.3 只有一条对角线2.2 sp.dia_…...

java ssm自行车在线租赁系统idea

当前自行车在社会上广泛使用,但自行车的短距离仍旧不能完全满足广大用户的需求。自行车在线租赁系统可以为用户提供租赁用车等功能,拥有较好的用户体验.能实时在线租赁提供更加快捷方便的租车方式,解决了常见自行车在线租赁系统较为局限的自行车归还功能。 通过使用本系统&…...

GAN和CycleGAN

文章目录1. GAN 《Generative Adversarial Nets》1.1 相关概念1.2 公式理解1.3 图片理解1.4 熵、交叉熵、KL散度、JS散度1.5 其他相关&#xff08;正在补充&#xff01;&#xff09;2. Cycle GAN 《Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Ne…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...