漏刻有时百度地图API实战开发(8)关键词输入检索获取经纬度坐标和地址

在这里插入图片描述
在百度地图中进行关键词输入检索时:

  1. 在地图页面顶部的搜索框中输入关键词。
  2. 点击搜索按钮或按下回车键进行搜索。
  3. 地图将显示与关键词相关的地点、商家、景点等信息。
  4. 可以使用筛选和排序功能来缩小搜索范围或更改搜索结果的排序方式。
  5. 点击搜索结果中的地点或商家,可以查看详细信息、位置、联系方式等。
  6. 还可以使用高级搜索功能来设置更多的搜索条件,如距离、评分、价格等。

具体的操作如下:

构建HTML容器

    <!--快速搜索-->
    <div class="layui-card">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item" id="r-result">
                <label class="layui-form-label">地址查询 <span class="x-red">*</span></label>
                <div class="layui-input-block">
                    <input type="text" placeholder="输入关键词" id="suggestId" class="layui-input" style="width: 100%;"/>
                </div>
            </div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        </form>
    </div>

获取下拉列表

var ac = new BMap.Autocomplete(
        {
            "input": "suggestId"
            , "location": map
        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        $("#searchResultPanel").val(str);
    });

监听地图获取坐标和地址

var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        console.log(_value)
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        $("#searchResultPanel").val("onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue);
        $("#poi_province").val(_value.province)
        $("#poi_city").val(_value.city)
        $("#poi_area").val(_value.district)
        $("#poi_address").val(_value.street + _value.business);
        setPlace();
    });

    //设置中心的
    function setPlace() {
        map.clearOverlays();

        function myFun() {
            var pp = local.getResults().getPoi(0).point;//获取第一个智能搜索的结果
            //console.log(pp);
            $("#lnglat").val(pp.lng + ',' + pp.lat);
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/234843.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

办公word-从不是第一页添加页码

总结 实际需要注意的是&#xff0c;分隔符、分节符和分页符并不是一个含义 分隔符包含其他两个&#xff1b;分页符&#xff1a;是增加一页&#xff1b;分节符&#xff1a;指将文档分为几部分。 从不是第一页插入页码1步骤 1&#xff0c;插入默认页码 自己可以测试时通过**…

linux 14网站架构 编译安装mysql数据库

目录 LNMP网站架构下载源码包mysql 下载位置 mysql 安装1.1、清理安装环境&#xff1a;1.2、创建mysql用户1.3、从官网下载tar包1.4、安装编译工具1.5、解压1.6、编译安装编译安装三部曲1.7、初始化初始化,只需要初始化一次1.8、启动mysql1.9、登录mysql1.10、systemctl启动方式…

web 前端之标签练习+知识点

目录 实现过程&#xff1a; 结果显示 1、HTML语法 2、注释标签 3、常用标签 4、新标签 5、特殊标签 6、在网页中使用视频和音频、图片 7、表格标签 8、超链接标签 使用HTML语言来实现该页面 实现过程&#xff1a; <!DOCTYPE html> <html><head>…

nlkt中BigramAssocMeasures.pmi()方法的传参和使用

这个问题找遍全网没看到详细的介绍&#xff0c;最后用读代码数学公式的方法才理解怎么用。 BigramAssocMeasures.pmi 作用&#xff1a;计算x和y的互信息&#xff08;互信息是什么我就不科普啦&#xff09; 这里有个误区刚开始我以为是计算两个词之间的依赖程度&#xff0c;但…

【Spring教程25】Spring框架实战:从零开始学习SpringMVC 之 SpringMVC入门案例总结与SpringMVC工作流程分析

目录 1.入门案例总结2. 入门案例工作流程分析2.1 启动服务器初始化过程2.2 单次请求过程 欢迎大家回到《Java教程之Spring30天快速入门》&#xff0c;本教程所有示例均基于Maven实现&#xff0c;如果您对Maven还很陌生&#xff0c;请移步本人的博文《如何在windows11下安装Mave…

java resource ‘process/qingjia.png‘ not found

resource中的资源在target中没有&#xff0c;导致报错&#xff0c;如下图所示&#xff1a; 解决办法&#xff1a;在pom文件中添加如下代码&#xff1a; 重新执行代码&#xff0c;就能在target中看到png文件了。 类似的错误参考链接&#xff1a;mybatis-plus框架报错&#x…

探索HarmonyOS_开发软件安装

随着华为推出HarmonyOS NEXT 宣布将要全面启用鸿蒙原声应用&#xff0c;不在兼容安卓应用&#xff0c; 现在开始探索鸿蒙原生应用的开发。 HarmonyOS应用开发官网 - 华为HarmonyOS打造全场景新服务 鸿蒙官网 开发软件肯定要从这里下载 第一个为微软系统(windows)&#xff0c;第…

【Linux】使用Bash和GNU Parallel并行解压缩文件

介绍 在本教程中&#xff0c;我们将学习如何使用Bash脚本和GNU Parallel实现高效并行解压缩多个文件。这种方法在处理大量文件时可以显著加快提取过程。 先决条件 确保系统上已安装以下内容&#xff1a; BashGNU Parallel 你可以使用以下命令在不同Linux系统上安装它们&am…

RF射频干扰被动型红外传感器误判分析及整改事例

1.1 什么是红外传感 测量系统是以红外线为介质&#xff0c;探测可分成为光子和热探测器。 简洁原理就是利用产生的辐射与物质相互作用后呈现出来的物理效应就是它的基本原理。 1.2 红外按方式分类 &#xff08;1&#xff09;被动型红外&#xff1a;本身不会向外界辐射任何能量…

大师学SwiftUI第18章Part2 - 存储图片和自定义相机

存储图片 在前面的示例中&#xff0c;我们在屏幕上展示了图片&#xff0c;但也可以将其存储到文件或数据库中。另外有时使用相机将照片存储到设备的相册薄里会很有用&#xff0c;这样可供其它应用访问。UIKit框架提供了如下两个保存图片和视频的函数。 UIImageWriteToSavedPh…

ffmpeg6.0之ffprobe.c源码分析二-核心功能源码分析

本篇我们继续分析: 1、ffprobe -show_packets 参数的处理流程;2、ffprobe -show_frames 参数的处理流程;3、ffprobe -show_streams 参数的处理流程;4、ffprobe -show_format 参数的处理流程; 因为前面的文章已经回顾了这些命令的使用,以及作用。本文就不在赘述,以免篇幅…

电子学会C/C++编程等级考试2022年03月(五级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:数字变换 给定一个包含 5 个数字(0-9)的字符串, 例如 “02943”, 请将“12345”变换到它。 你可以采取 3 种操作进行变换 1. 交换相邻的两个数字 2. 将一个数字加 1。 如果加 1 后大于 9, 则变为 0 3. 将一个数字加倍。 如果…

查找两个总和为特定值的索引(蓝桥杯)

#include <stdio.h> int main(){int n;scanf("%d",&n);int s[n];for(int i 0 ; i < n ; i)scanf("%d",&s[i]);int k;scanf("%d",&k);int sum 0;int t0,h;int st[101]; for(int i 0 ; i < n ; i)st[i] 0; //标记数…

加载离线镜像包:在线镜像离线为tar包、tar离线镜像包加载并根据imageId打tag

第一步&#xff1a;在线环境压缩离线镜像&#xff1a; 需要两个文件&#xff0c;第一个是脚本文件image_offline_load.sh脚本&#xff0c;第二个是image_list.txt 按行 存放需要离线的镜像名称 ./image_offline_load.sh save image_list.txt output.tar第二步&#xff1a;在离…

【参天引擎】华为参天引擎内核架构专栏开始更新了,多主分布式数据库的特点,类oracle RAC国产数据开始出现了

cantian引擎的介绍 ​专栏内容&#xff1a; 参天引擎内核架构 本专栏一起来聊聊参天引擎内核架构&#xff0c;以及如何实现多机的数据库节点的多读多写&#xff0c;与传统主备&#xff0c;MPP的区别&#xff0c;技术难点的分析&#xff0c;数据元数据同步&#xff0c;多主节点的…

【Linux】进程间通信之共享内存/消息队列/信号量

文章目录 一、共享内存的概念及原理二、共享内存相关接口说明1.shmget函数2.ftok函数3.shmat函数4.shmdt函数5.shmctl函数 三、用共享内存实现server&client通信1.shm_server.cc2.shm_client.cc3.comm.hpp4.查看ipc资源及其特征5.共享内存的优缺点6.共享内存的数据结构 四、…

Spring JDBC和事务管理

Spring JDBC是Spring框架用来处理关系型数据库的模块&#xff0c;对JDBC的API进行了封装。 Spring JDBC的核心类为JdbcTemplate&#xff0c;提供数据CRUD方法 Spring JDBC使用步骤 Maven工程引入依赖spring-jdbc <dependency><groupId>org.springframework<…

案例026:基于微信小程序的原创音乐系统的设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

建立个人学习观|地铁上的自习室

作者&#xff1a;向知 如果大家有机会来北京&#xff0c;可以来看看工作日早上八九点钟&#xff0c;15 号线从那座叫“顺义”的城市通向“望京”的地铁&#xff0c;你在那上面&#xff0c;能看到明明白白的&#xff0c;人们奔向梦想的模样。 一、地铁上的自习室 我在来北京之前…

基于JavaWeb+SSM+Vue助农扶贫微信小程序系统的设计和实现

基于JavaWebSSMVue助农扶贫微信小程序系统的设计和实现 源码获取入口Lun文目录前言主要技术系统设计功能截图 源码获取入口 Lun文目录 目 录 第一章 绪论 1 1.1 研究背景 1 1.2 研究意义 1 1.3 研究内容 2 第二章 开发环境与技术 3 2.1 JSP技术 3 2.2 MySQL数据库 3 2.3 Java…