资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

JS怎么使用百度地图API自动获取地址和经纬度

小编给大家分享一下JS怎么使用百度地图API自动获取地址和经纬度,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都网站设计、外贸营销网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的浚县网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

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

1、HTML代码如下




  点击地图获取地址和经纬度map,address,lng,lat
  
  
  
  



  
    
      
        经度
        
        
      
      
        纬度
        
        
      
      
        地址
        
          
          
        
      
    
  
  

2、JS代码如下


  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);
  }

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

JS怎么使用百度地图API自动获取地址和经纬度

JS怎么使用百度地图API自动获取地址和经纬度

JS怎么使用百度地图API自动获取地址和经纬度

JavaScript可以做什么

1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 2.可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 3.可以根据用户的操作,动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。

看完了这篇文章,相信你对“JS怎么使用百度地图API自动获取地址和经纬度”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前标题:JS怎么使用百度地图API自动获取地址和经纬度
本文网址:http://cdkjz.cn/article/jdciec.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220