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 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
cookie的secure属性详解
Apr 08 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
php smarty的预保留变量总结
2008/12/04 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python 控制语句
2011/11/03 Python
python实现类的静态变量用法实例
2015/05/08 Python
Python通过future处理并发问题
2017/10/17 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
学生爱国演讲稿
2014/01/14 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
学校工会工作总结2015
2015/05/19 职场文书
党支部半年考察意见
2015/06/01 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android