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

news2024/11/27 8:24:41

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

  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);
    }

@漏刻有时

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

软件工程考试复习

第一章、软件工程概述 &#x1f31f;软件程序数据文档&#xff08;考点&#xff09; &#x1f31f;计算机程序及其说明程序的各种文档称为 &#xff08; 文件 &#xff09; 。计算任务的处理对象和处理规则的描述称为 &#xff08; 程序 &#xff09;。有关计算机程序功能、…

Spring Cloud Gateway + Nacos + LoadBalancer实现企业级网关

1. Spring Cloud Gateway 整合Nacos、LoadBalancer 实现企业级网关 前置工作&#xff1a; 创建 SpringBoot 多模块项目创建网关&#xff08;gateway-service&#xff09;、用户&#xff08;user-service&#xff09;模块用户模块添加 Nacos discovery 支持以及 Spring Web&am…

一键抠图2:C/C++实现人像抠图 (Portrait Matting)

一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 目录 一键抠图2&#xff1a;C/C实现人像抠图 (Portrait Matting) 1. 前言 2. 抠图算法 3. 人像抠图算法MODNet &#xff08;1&#xff09;模型训练 &#xff08;2&#xff09;将Pytorch模型转换ONNX模型 &…

【IDEA】IntelliJ IDEA中进行Git版本控制

本篇文章主要记录一下自己在IntelliJ IDEA上使用git的操作&#xff0c;一个新项目如何使用git进行版本控制。文章使用的IDEA版本 IntelliJ IDEA Community Edition 2023.3&#xff0c;远程仓库为https://gitee.com/ 1.配置Git&#xff08;File>Settings&#xff09; 2.去Git…

Java网络编程——安全网络通信

在网络上&#xff0c;信息在由源主机到目标主机的传输过程中会经过其他计算机。在一般情况下&#xff0c;中间的计算机不会监听路过的信息。但在使用网上银行或者进行信用卡交易时&#xff0c;网络上的信息有可能被非法分子监听&#xff0c;从而导致个人隐私的泄露。由于Intern…

adb unauthorized 踩坑记录

给Realme X7 Pro 安装Root后&#xff0c;发现adb连接设备呈现unauthorized 状态&#xff1a; 在Google以后&#xff0c;尝试了很多方案&#xff0c;均无效&#xff0c;尝试的方案如下&#xff1a; 重启手机&#xff0c;电脑。不行撤销调试授权&#xff0c;开关usb调试&#xf…

基于单片机智能安防窗户防盗系统设计

**单片机设计介绍&#xff0c;基于单片机智能安防窗户防盗系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的智能安防窗户防盗系统是一种利用单片机技术设计的窗户防盗装置。它通过传感器监测窗户状态&#xf…

vue使用echarts显示中国地图

项目引入echarts以后&#xff0c;在页面创建canvas标签 引入一个公共js文件&#xff08;下面这段代码就是china.js文件&#xff09; (function (root, factory) {if (typeof define function && define.amd) {// AMD. Register as an anonymous module.define([ex…

成都工业学院Web技术基础(WEB)实验四:CSS3布局应用

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…

Windows 和 MacOS 上安装配置ADB(安卓调试桥)

一、Android 调试桥 (ADB) Android 调试桥&#xff08;ADB&#xff09; 是一款多功能命令行工具&#xff0c;它让你能够更便捷地访问和管理 Android 设备。使用 ADB 命令&#xff0c;你可以轻松执行以下操作 在设备上安装、复制和删除文件&#xff1b;安装应用程序&#xff1…

多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现TSOA-TCN-Multihead-…

【Python网络爬虫入门教程1】成为“Spider Man”的第一课:HTML、Request库、Beautiful Soup库

Python 网络爬虫入门&#xff1a;Spider man的第一课 写在最前面背景知识介绍蛛丝发射器——Request库智能眼镜——Beautiful Soup库 第一课总结 写在最前面 有位粉丝希望学习网络爬虫的实战技巧&#xff0c;想尝试搭建自己的爬虫环境&#xff0c;从网上抓取数据。 前面有写一…

移动到末尾(蓝桥杯)

#include <stdio.h> #include <stdlib.h>#define N 1000 //双指针思想 int main(int argc, char *argv[]) {int n;int s[N];scanf("%d",&n);for(int i 0 ; i < n ; i)scanf("%d",&s[i]);int j 0; for(int i 0 ; …

SSM与SpringBoot面试题总结

什么是spring&#xff1f;谈谈你对IOC和AOP的理解。 Spring:是一个企业级java应用框架&#xff0c;他的作用主要是简化软件的开发以及配置过程&#xff0c;简化项目部署环境。 Spring的优点: 1、Spring低侵入设计&#xff0c;对业务代码的污染非常低。 2、Spring的DI机制将…

什么是神经网络的非线性

大家好啊&#xff0c;我是董董灿。 最近在写《计算机视觉入门与调优》&#xff08;右键&#xff0c;在新窗口中打开链接&#xff09;的小册&#xff0c;其中一部分说到激活函数的时候&#xff0c;谈到了神经网络的非线性问题。 今天就一起来看看&#xff0c;为什么神经网络需…

Linux中的SNAT与DNAT实践

Linux中的SNAT与DNAT实践 1、SNAT的介绍1.1&#xff0c;SNAT概述1.2&#xff0c;SNAT源地址转换过程1.3&#xff0c;SNAT转换 2、DNAT的介绍2.1&#xff0c;DNAT概述2.2&#xff0c;DNAT转换前提条件2.3&#xff0c;DNAT的转换 3、防火墙规则的备份和还原4、tcpdump抓包工具的运…

kafka学习笔记--如何保证生产者数据可靠、不重复、有序

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…

改进YOLOv8注意力系列一:结合ACmix、Biformer、BAM注意力机制

🗝️改进YOLOv8注意力系列一:结合ACmix、Biformer、BAM注意力机制 代码ACmixBiFormerBAMBlock加入方法各种yaml加入结构本文提供了改进 YOLOv8注意力系列包含不同的注意力机制以及多种加入方式,在本文中具有完整的代码和包含多种更有效加入YOLOv8中的yaml结构,读者可以获…

特征驱动开发

FDD 方法来自于一个大型的新加坡银行项目。FDD 的创立者 Jeff De Luca 和 Peter Coad 分别是这个项目的项目经理和首席架构设计师。在 Jeff 和 Peter 接手项目时&#xff0c;客户已经经历了一次项目的失败&#xff0c;从用户到高层都对这个项目持怀疑的态度&#xff0c;项目组士…

WLAN配置实验

本文记录了WLAN配置实践的过程&#xff0c;该操作在华为HCIA中属于相对较复杂的实验&#xff0c;记录过程备忘。这里不就WLAN原理解释&#xff0c;仅进行配置实践&#xff0c;可以作为学习原理时候的参考。本文使用华为ENSP进行仿真。实验拓扑图如下&#xff1a; 1.WLAN工作流程…