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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
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 expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php 地区分类排序算法
2013/07/01 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php多重接口的实现方法
2015/06/20 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
JavaScript 不只是脚本
2007/05/30 Javascript
css图片自适应大小
2007/11/28 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python编程实现的简单Web服务器示例
2017/06/22 Python
python机器人行走步数问题的解决
2018/01/29 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python阶乘求和的代码详解
2020/02/14 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
自我鉴定总结
2014/03/24 职场文书
需求分析说明书
2014/05/09 职场文书
正规欠条模板
2015/07/03 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers