使用百度地图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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
js密码强度校验
Nov 10 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 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中IP地址与整型数字互相转换详解
2014/08/20 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
python比较两个列表大小的方法
2015/07/11 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
青春寄语大全
2014/04/09 职场文书
继承权公证书
2014/04/09 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2015年中个人总结范文
2015/03/10 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年化验室工作总结
2015/04/23 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
Mysql开启外网访问
2022/05/15 MySQL