使用百度地图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 相关文章推荐
JS中setTimeout()的用法详解
Apr 14 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
jquery获取tagName再进行判断
May 29 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
基于JavaScript实现省市联动效果
Jun 22 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python如何实现内容写在图片上
2018/03/23 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python使用递归的方式建立二叉树
2019/07/03 Python
如何让python的运行速度得到提升
2020/07/08 Python
python线程里哪种模块比较适合
2020/08/02 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
法学毕业生自荐信
2013/11/13 职场文书
好的演讲稿开场白
2013/12/30 职场文书
庆七一活动方案
2014/01/25 职场文书
演讲稿格式
2014/04/30 职场文书
班级体育活动总结
2014/07/05 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
开业典礼致辞
2015/07/29 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python