欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-12 19:20:34
本文实例讲述了js使用百度地图api自动获取地址和经纬度操作。分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度api的时候往往又...

本文实例讲述了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程序设计有所帮助。