使用百度地图api实现根据地址查询经纬度


Posted in Javascript onDecember 11, 2014
<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: 50; 

                border: 1px solid gray;

                overflow:hidden;">

        </div>

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

以上就是代码的全部内容了,小伙伴们可以直接使用在项目中哦,不用跟我说谢谢,请叫我雷锋大大~

Javascript 相关文章推荐
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
Element InputNumber计数器的使用方法
Jul 27 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 #Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 #Javascript
node.js中的buffer.slice方法使用说明
Dec 10 #Javascript
node.js中的buffer.write方法使用说明
Dec 10 #Javascript
node.js中的http.request.end方法使用说明
Dec 10 #Javascript
node.js中的emitter.on方法使用说明
Dec 10 #Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 #Javascript
You might like
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php反射应用示例
2014/02/25 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python机器学习之决策树算法
2017/12/22 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
学生自我鉴定范文
2013/10/04 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
门面房租房协议书
2014/08/20 职场文书
保送生自荐信范文
2015/03/26 职场文书
商业计划书范文
2019/04/24 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers