<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>

    </head>  

    <body style="background:#CBE1FF">

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

            要查询的地址：<input id="text_" type="text" value="郑州大学" style="margin-right:100px;" /> 查询结果(经纬度)：

            <input id="result_" type="text" />

            <input type="button" value="查询" onclick="searchByStationName();" />

            <div id="container" style="position: absolute;

                margin-top:30px;

                width: 730px;

                height: 590px;

                top: ;

                border: 1px solid gray;

                overflow:hidden;">

            </div>

        </div>

    </body>

    <script type="text/javascript">

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

        map.centerAndZoom("郑州", );

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

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

                map.centerAndZoom(poi.point, );

                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>

根据地址查询经纬度Js的更多相关文章

  1. 根据地址查询经纬度.html

    <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>根据地址查询经纬度</t ...

  2. 百度地图API 根据地址查询经纬度

    html页面.引用上API: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ...

  3. 百度地图API简单应用——1.根据地址查询经纬度

    这几天比较空闲,就接触了下百度地图的API(开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的.只要简单几步注册下,就可以获得一个Key,就能直接调用(P ...

  4. Android中由IP地址查询经纬度坐标的实例

    大家都知道,根据IP地址就可以知道它所在的具体位置,在Android中同样可以由IP地址得到它的位置,即具体的地理经纬度坐标. 本文就直接以代码的方式演示如何根据IP地址查询地理经纬度坐标位置,下面的 ...

  5. 利用百度地图API根据地址查询经纬度

    传上来只是为了记录下三种jsonp方式,$.get(url, callback)方式不行,会出错 -- 必须指明返回类型为”json”才行. 或者使用$.getJSON()或者$.ajax({}). ...

  6. python实现ip地址查询经纬度定位

    1.此api已经关闭 https://api.map.baidu.com/highacciploc/v1?qcip=220.181.38.113&ak=你申请的AK&extension ...

  7. 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句，那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行，什么时候被执行，在 return 前还是后? js获取某个日期

    腾讯云图片鉴黄集成到C#   官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...

  8. 百度api查询多个地址的经纬度的问题

    在使用百度api查询多个地址的经纬度的时候,由于百度api提供的经纬度查询方法是回调函数,并且后续操作必须等经纬度获取完成才能进行,问题就存在于怎么判断所有地点是否都回调完成了,问了之前的一个前端大佬 ...

  9. 利用百度API(js)，怎样通过地址获取经纬度

    根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...

随机推荐

  1. js数组删除元素、json删除元素

    //数组var b=[1,2,3,4]; b.splice(b.indexOf(2,1)) //1,3,4 //json var arrayId=[{"id":233," ...

  2. 使用chrome-devtools定位元素

    2.1使用chrome-devtools 这是谷歌提供的一个移动端Web开发调试工具,通过它我们可以调试手机页面.通过调试我们可以看到wap页面的源码,从而进行元素的定位.那么这个工具该如何使用呢?首 ...

  3. scrapy的持久化相关

    终端指令的持久化存储 保证爬虫文件的parse方法中有可迭代类型对象(通常为列表or字典)的返回,该返回值可以通过终端指令的形式写入指定格式的文件中进行持久化操作. 需求是:将糗百首页中段子的内容和标 ...

  4. Windows linux子系统 使用说明

    1.安装 linux 子系统 2.应用商店安装ubuntu 3.为了方便可以配置成默认登陆root账户 Ubuntu config –default-user root   4. 安装完毕   5.安 ...

  5. Spark环境搭建（六）-----------sprk源码编译

    想要搭建自己的Hadoop和spark集群,尤其是在生产环境中,下载官网提供的安装包远远不够的,必须要自己源码编译spark才行. 环境准备: 1,Maven环境搭建,版本Apache Maven 3 ...

  6. Ubuntu server 16.04安装，无网卡驱动解决

    因为使用一个软件必须要在ubuntu server 16.04上安装,因此先在裸机上安装ubuntu server 16.04,具体信息: 镜像版本:ubuntu-16.04.6-server-amd ...

  7. Windows 2003 防火墙开启后无法访问FTP解决办法

    最近遇到一个比较郁闷的问题,服务器开启防火墙后电脑就无法访问服务器的防火墙,但是防火墙又不能关,在例外中添加端口21也不管用. 后来在网上终于找到了一个解决方案,可以在不关掉防火墙的情况下访问服务器的 ...

  8. LINUX监控-spotlight

    这里连接的user不能是root(spotlight需要一个具有root权限的用户,但是又不允许是root),所以需要给要连接的linux端创建一个有root权限的用户,在linux主机创建了root ...

  9. Round #3

    题源:感谢 by hzwer 水灾(sliker.cpp/c/pas) 1000MS  64MB 大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的 ...

  10. D. Frets On Fire 前缀和+二分

    这个题真的难了我一天了,这种方法一开始没想出来,后来看了题解后明白了大致思路开始自己做但是!!!但是自己实现的时候老是一些细节出错!!!,调bug调了得有一个小时,蠢死了,这道题我一定要好好总结,总结 ...