JS使用百度地图API自动获取地址和经纬度操作示例


Posted in Javascript onApril 16, 2019

本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作。分享给大家供大家参考,具体如下:

在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求。

故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度:

1、HTML代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>点击地图获取地址和经纬度map,address,lng,lat</title>
  <meta name="robots" content="noindex, nofollow">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!-- 将百度地图API引入,设置好自己的key -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
<div class="main-div">
  <form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()">
    <table cellspacing="1" cellpadding="3" width="100%">
      <tr>
        <td class="label">经度</td>
        <td><input type="text" name="lng" id="lng" value=""/>
        </td>
      </tr>
      <tr>
        <td class="label">纬度</td>
        <td><input type="text" name="lat" id="lat" value=""/>
        </td>
      </tr>
      <tr>
        <td class="label">地址</td>
        <td>
          <input type='text' value='' name='sever_add' id='sever_add' readonly>
          <input type='button' value='点击显示地图获取地址经纬度' id='open'>
        </td>
      </tr>
    </table>
  </form>
  <div id='allmap' style='width: 50%; height: 50%; position: absolute; display: none'></div>
</div>
</body>
</html>

2、JS代码如下

<script type="text/javascript">
  function validate() {
    var sever_add = document.getElementsByName('sever_add')[0].value;
    if (isNull(sever_add)) {
      alert('请选择地址');
      return false;
    }
    return true;
  }
  //判断是否是空
  function isNull(a) {
    return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;
  }
  document.getElementById('open').onclick = function () {
    if (document.getElementById('allmap').style.display == 'none') {
      document.getElementById('allmap').style.display = 'block';
    } else {
      document.getElementById('allmap').style.display = 'none';
    }
  }
  var map = new BMap.Map("allmap");
  var geoc = new BMap.Geocoder();  //地址解析对象
  var markersArray = [];
  var geolocation = new BMap.Geolocation();
  var point = new BMap.Point(116.331398, 39.897445);
  map.centerAndZoom(point, 12); // 中心点
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      var mk = new BMap.Marker(r.point);
      map.addOverlay(mk);
      map.panTo(r.point);
      map.enableScrollWheelZoom(true);
    }
    else {
      alert('failed' + this.getStatus());
    }
  }, {enableHighAccuracy: true})
  map.addEventListener("click", showInfo);
  //清除标识
  function clearOverlays() {
    if (markersArray) {
      for (i in markersArray) {
        map.removeOverlay(markersArray[i])
      }
    }
  }
  //地图上标注
  function addMarker(point) {
    var marker = new BMap.Marker(point);
    markersArray.push(marker);
    clearOverlays();
    map.addOverlay(marker);
  }
  //点击地图时间处理
  function showInfo(e) {
    document.getElementById('lng').value = e.point.lng;
    document.getElementById('lat').value = e.point.lat;
    geoc.getLocation(e.point, function (rs) {
      var addComp = rs.addressComponents;
      var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
      if (confirm("确定要地址是" + address + "?")) {
        document.getElementById('allmap').style.display = 'none';
        document.getElementById('sever_add').value = address;
      }
    });
    addMarker(e.point);
  }
</script>

将js代码放入到html中,我们可以得到效果图如下:

JS使用百度地图API自动获取地址和经纬度操作示例

JS使用百度地图API自动获取地址和经纬度操作示例

JS使用百度地图API自动获取地址和经纬度操作示例

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

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

Javascript 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
JS实现的汉字与Unicode码相互转化功能分析
May 25 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
vue+element UI实现树形表格带复选框的示例代码
Apr 16 #Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 #Javascript
Vue 理解之白话 getter/setter详解
Apr 16 #Javascript
在vue中使用setInterval的方法示例
Apr 16 #Javascript
vue实现局部刷新的实现示例
Apr 16 #Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 #Javascript
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
react-native之ART绘图方法详解
2017/08/08 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Python程序退出方式小结
2017/12/09 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
python图片合成的示例
2020/11/09 Python
中间件分为哪几类
2012/03/14 面试题
大学生学习自我评价
2014/01/13 职场文书
高一政治教学反思
2014/01/28 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
大学生创业事迹材料
2014/12/30 职场文书
个人借条范本
2015/05/25 职场文书