JS实现根据详细地址获取经纬度功能示例


Posted in Javascript onApril 16, 2019

本文实例讲述了JS实现根据详细地址获取经纬度功能。分享给大家供大家参考,具体如下:

这个功能还是比较实用的,记录分享一下:

<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("郑州", 15);
    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>

这里使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行效果:

JS实现根据详细地址获取经纬度功能示例

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》及《JavaScript字符与字符串操作技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 #Javascript
在vue中使用setInterval的方法示例
Apr 16 #Javascript
vue实现局部刷新的实现示例
Apr 16 #Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 #Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 #Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
You might like
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
jQuery入门知识简介
2010/03/04 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
酒店应聘自荐信
2013/11/09 职场文书
毕业生自荐书
2014/02/03 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2014年老干部工作总结
2014/11/21 职场文书
先进个人申报材料
2014/12/30 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python