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 相关文章推荐
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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读取msn上的用户信息类
2008/12/05 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
让复选框只能选择一项的方法
2013/10/08 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
优秀语文教师事迹
2014/05/18 职场文书
活动总结格式
2014/08/30 职场文书
个人自查自纠材料
2014/10/14 职场文书
母亲节主题班会
2015/08/14 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
基于PyQt5制作一个群发邮件工具
2022/04/08 Python