先上效果图，这是直接点击获取经纬度和地址的。没有做搜索的功能。

代码：

<!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=您的key值"></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'>

                        <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>

<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(113.271431, 23.135336);

    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;

            document.getElementById('sever_add').value = address;

        });

        addMarker(e.point);

    }

</script>

</html>

就这样就完成。直接拷贝可用。

PS：转载请注明来源。

使用百度地图API自动获取地址和经纬度的更多相关文章

  1. Python利用百度地图api批量获取地址经纬度

    1.pip安装xlrd,xlwt,requests模块. 2.在工程目录处放置地点Excel文件. python2.7.13代码: #coding:utf-8 import xlrd import x ...

  2. 用户Ip地址和百度地图api接口获取用户地理位置（经纬度坐标，城市）

    <?php   //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){     if(!empty($_SERVE ...

  3. 利用百度地图API，获取经纬度坐标

    利用百度地图API,获取经纬度坐标 代码很简单,但在网上没找到现成的获取地图经纬度的页面. 就是想,给当前页面传递一个经纬度,自动定位到此经纬度.然后可以重新选择,选择完返回经纬度. 效果如下: 源代 ...

  4. 通过百度地图API实现搜索地址--第三方开源--百度地图（三）

    搜索地址功能是建立在能够通过百度地图API获取位置的基础上 通过百度地图定位获取位置详情:http://www.cnblogs.com/zzw1994/p/5008134.html package c ...

  5. 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. android菜鸟学习笔记31----Android使用百度地图API(二)获取地理位置及地图控制器的简单使用

    1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...

  7. python3调取百度地图API输出某地点的经纬度信息

    1. 查看API接口说明 地址:http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding 注:callback ...

  8. 使用百度地图api接口获取公交地图路线和车站

    需要在页面文件中引用百度的js @*<script type="text/javascript" src="http://api.map.baidu.com/api ...

  9. 利用百度地图开源sdk获取地址信息。

    注册百度开发者帐号,下载相关sdk 添加权限: 添加百度注册访问应用(AK)码 添加源代码文件到libs文件: 代码如下: package com.lixu.baidu_gps; import com ...

随机推荐

  1. Tomca的启动与关闭

    点击startup.bat启动,遇到一闪而过的问题,可能尚未配置JAVA_HOME 8080端口被占用导致启动失败 关闭Tomcat的三种方式 * 点击x (不推荐) * 双击shutdown.bat ...

  2. 前端 - 轮询, 长轮训, websocket

    轮询 概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息 代码 function showUnreadNews() { $(document).ready(fun ...

  3. wan口的ip是干什么用的

    wan口的ip是外网的ip,属于公网的ip.主要用于外网的识别,WAN口主要用于连接外部网络,如ADSL.DDN.以太网等各种接入线路:而LAN口用来连接家庭内部网络,主要与家庭网络中的交换机.集线器 ...

  4. iOS Xib布局某些控件显示或隐藏<约束的修改>

    对于这个问题使用Masonry是很好解决的. 注意:绿色的是label2,当indexpath.section % 2 == 0时,label2不存在. 关键代码如下: if (indexPath.s ...

  5. Linux 下清空或删除大文件内容的 5 种方法

    在 Linux 终端下处理文件时,有时我们想直接清空文件的内容但又不必使用任何 Linux 命令行编辑器 去打开这些文件.那怎样才能达到这个目的呢?在这篇文章中,我们将介绍几种借助一些实用的命令来清空 ...

  6. [非原创]Office 2019 增强版 批处理激活 亲测成功

    忘了原创网址了,在 https://www.52pojie.cn/ 上看到的,这里我备忘一下,希望知道原创网址的朋友告诉我一下,谢谢! 将下面批处理脚本存成.bat文件后,以管理员方式运行: @ech ...

  7. 利用先电云iaas平台搭建apache官方大数据平台（ambari2.7+hdp3.0）

    一.ambari架构解析 二.基础环境配置 以两台节点为例来组件Hadoop分布式集群,这里采用的系统版本为Centos7 1511,如下表所示: 主机名 内存 硬盘 IP地址 角色 master 8 ...

  8. 最新 浪潮java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.浪潮等10家互联网公司的校招Offer,因为某些自身原因最终选择了浪潮.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. Vue2.4+新增属性.sync、$attrs、$listeners

    参考链接:https://www.jianshu.com/p/4649d317adfe

  10. eNSP——ARP及ProxyARP

    原理: ARP (Address Resolution Protocol)是用来将IP地址解析为MAC地址的协议.ARP表项可以分为动态和静态两种类型.动态ARP是利用ARP广播报文,动态执行并自动进 ...