使用百度地图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按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP实现的简单日历类
2014/11/29 PHP
php分页查询的简单实现代码
2017/03/14 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
Position属性之relative用法
2015/12/14 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
Python调用C++程序的方法详解
2017/01/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python中的延迟绑定原理详解
2019/10/11 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
住院医师规范化培训实施方案
2014/06/12 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2015年教师节活动总结
2015/03/20 职场文书
离职证明范本
2015/06/12 职场文书
队列队形口号
2015/12/25 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Java版 单机五子棋
2022/05/04 Java/Android