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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
摘自启点的main.js
Apr 20 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
prototype.js常用函数详解
Jun 18 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
详解JavaScript中return的用法
May 08 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
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
php小偷相关截取函数备忘
2010/11/28 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
js实现随机div颜色位置 类似满天星效果
2019/10/24 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
python sort、sorted高级排序技巧
2014/11/21 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
小车司机岗位职责
2013/11/25 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
党课主持词大全
2015/06/30 职场文书
全民创业工作总结
2015/08/13 职场文书
2015年度女工工作总结
2015/10/22 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
redis限流的实际应用
2021/04/24 Redis
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
Python Flask实现进度条
2022/05/11 Python