使用百度地图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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
详解vue axios用post提交的数据格式
Aug 07 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
vue 限制input只能输入正数的操作
Aug 05 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 多维数组排序实现代码
2009/08/05 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
《王二小》教学反思
2014/02/27 职场文书
服务承诺书怎么写
2014/05/24 职场文书
销售人才自我评价范文
2014/09/27 职场文书
个人借款协议书范本
2014/11/17 职场文书
市场部经理岗位职责
2015/02/02 职场文书
电气工程师岗位职责
2015/02/12 职场文书
php中pcntl_fork详解
2021/04/01 PHP