使用百度地图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代码
Dec 15 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
js的一些常用方法小结
Jun 29 Javascript
js特殊字符转义介绍
Nov 05 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
微信小程序实现拍照和相册选取图片
May 09 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 万年历实现代码
2012/10/18 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
你可能不知道的Python 技巧小结
2020/01/29 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
岗位职责范本
2013/11/23 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
大学学风建设方案
2014/05/04 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年手术室工作总结
2015/05/11 职场文书
爱国主义主题班会
2015/08/14 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android