需求：输入框输入地址点击查询，查询结果在地图定位到查询位置，显示查询位置的经纬度

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>***</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO&v=2.0&services=false"></script>

</head>

<body>

    <div style="width:730px;margin:auto;">

        <p style="font-family:'楷体';">

            <b>要查询的地址：</b><input id="text_" type="text" value="" style="margin:0;padding:10px 0;border:1px solid rgb(180, 180, 180);border-radius:8px;width:250px;height:10px;font-size:16px;text-align:center;"/>

            <input type="button" value="查询" onclick="searchByStationName();" style="width:85px;height:23px;border-color:#ccc;border-radius:25px;"/>

        </p>

        <p style="font-family:'楷体';">查询结果(经纬度)：<input id="result_" type="text" style="border:0;" /></p>

        <center>

        <div id="container"

            style="position: absolute;margin-top:30px;width:60%;height:80%;top:80;border: 1px solid gray;overflow:hidden;">

        </div>

        </center>

    </div>

</body>

<script type="text/javascript">

    var map = new BMap.Map("container");

    map.centerAndZoom("广州市", 12);

    map.enableScrollWheelZoom();

    map.enableContinuousZoom();

    map.addControl(new BMap.NavigationControl());

    map.addControl(new BMap.OverviewMapControl());

    map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));

    var localSearch = new BMap.LocalSearch(map);

    localSearch.enableAutoViewport();

    function searchByStationName() {

        map.clearOverlays();

        var keyword = document.getElementById("text_").value;

        localSearch.setSearchCompleteCallback(function (searchResult) {

            var poi = searchResult.getPoi(0);

            document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;

            map.centerAndZoom(poi.point, 13);

            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));

            map.addOverlay(marker);

            var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;

            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");

            marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });

             marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

        });

        localSearch.search(keyword);

    }

</script>

</html>

参考链接：(93条消息) JS地图搜索位置_CBDLL的博客-CSDN博客

JavaScript 实现地图搜索功能的更多相关文章

  1. 高德地图搜索功能以及清除搜索结果maker

    第一次写文章,写得不好各位看官见谅~ (pσ_σ)P首先这是一个vue里面的项目,高德地图api是直接CDN进来的,所以使用了global来调用,默认已经初始化了一个地图,为了实现一个输入框搜索功能和 ...

  2. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  3. javascript百度地图使用(根据地名定位、根据经纬度定位)

    需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...

  4. 百度地图API功能

    984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...

  5. iOS第三方地图－百度地图常用功能使用（POI搜索，地理正反编码，定位，添加标注）

    百度地图官网: http://developer.baidu.com/map/index.php?title=iossdk 百度地图集成 1.引入相关包

  6. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  7. 基于前端javascript的搜索功能

    发表于 2013/11/07 当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 功能描述: 按下键盘后及时搜索条 ...

  8. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  9. 原生javascript实现分页效果+搜索功能

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...

  10. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

随机推荐

  1. dotnet 设计规范 · 抽象类

    X 不要定义 public 或 protected internal 访问的构造函数.默认 C# 语言不提供抽象类的公开构造函数方法. 如果一个构造函数定义为公开,只有在开发者需要创建这个类的实例的时 ...

  2. Swift中的Result 类型的简单介绍

    Swift 5引入了一个新的Result类型, 它使用枚举来处理异步函数的结果. 苹果文档对该类型的描述: A value that represents either a success or a ...

  3. KingbaseES批量数据加载的实践技巧

    有时,KingbaseES数据库需要在单个或最少的步骤中导入大量数据,这通常称为批量数据导入.其中数据源通常是一个或多个大文件,这个过程有时可能非常慢. 造成性能不佳的原因有很多:索引.触发器.外键. ...

  4. Mac根据端口找进程id

    lsof -i:20942 以后认真的学习一下这个命令

  5. 【读书笔记】C#高级编程 第二章 核心C#

    (一)第一个C#程序 创建一个控制台应用程序,然后输入代码,输入完毕后点击F5 Console.WriteLine();这条语句的意思:把括号内的内容输出到界面上: Console.ReadKey() ...

  6. SpringBoot使用自定义注解+AOP+Redis实现接口限流

    为什么要限流 系统在设计的时候,我们会有一个系统的预估容量,长时间超过系统能承受的TPS/QPS阈值,系统有可能会被压垮,最终导致整个服务不可用.为了避免这种情况,我们就需要对接口请求进行限流. 所以 ...

  7. 【SQLServer】max worker threads参数配置

    查看和设置max worker threads USE master; //选中你想设置max worker threads的数据库.master表示在实例级别进行设置 GO EXEC sp_conf ...

  8. Linux宝塔如何开启指定的目录浏览功能

    哈喽,各位运维晚上好, 今天突发奇想,想给我的个人博客加一个功能,就是如何去打开一个网站文件夹的目录浏览功能,这个还是挺有趣的. 为了以后我还能想起怎么用,我决定记录下来,以便能用,也能给大家一个参考 ...

  9. Logstash集成GaussDB(高斯DB)数据到Elasticsearch

    GaussDB 简介 GaussDB 数据库分为 GaussDB T 和 GaussDB A,分别面向 OLTP 和 OLAP 的业务用户. GaussDB T 数据库是华为公司全自研的分布式数据库, ...

  10. windows系统下使用bat脚本文件设置 tomcat 系统环境变量

    说明:在一个bat文件中设置tomcat环境变量后,不能直接使用,需要另起一个bat文件才能使用 号开头的行不要写在bat文件中 # tomcat1.bat # 这个bat文件实现的功能:设置环境变量 ...