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

代码：

<!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. mysql查询表里的重复数据方法

    select username,count(*) as count from hk_test group by username having count>1;

  2. Tomcat发布项目

    WEB项目的目录结构 演示动态项目的创建 把项目打包成war包: 进入这个项目中,使用命令: jar cvf aaa.war * 发布动态项目的三种方式: 1. 直接复制项目到webapps下 2. ...

  3. spring 事务-使用@Transactional 注解（事务隔离级别）

    转: spring 事务-使用@Transactional 注解(事务隔离级别) 2016年08月11日 21:49:20 华华鱼 阅读数 15490 标签: spring事务Transactiona ...

  4. 从库因为sql错误导致主从同步被中断的问题解决

    从库因为sql错误导致主从同步被中断的问题解决:show slave status\G;看lasterror:看延迟多少秒,正常情况下是没有延迟的. 跳过错误的那条sql:SET GLOBAL SQL ...

  5. XHProf报告字段含义

    Function Name:方法名称. Calls:方法被调用的次数. Calls%:方法调用次数在同级方法总数调用次数中所占的百分比. Incl.Wall Time(microsec):方法执行花费 ...

  6. MLN 讨论 —— 基础知识

    一. MLN相关知识的介绍 1. First-order logic A first-order logic knowledge base (KB) is a set of formulas in f ...

  7. python遍历文件夹中所有文件夹和文件，os.walk

    python中可以用os.walk来遍历某个文件夹中所有文件夹和文件. 例1: import os filePath = 'C:/Users/admin/Desktop/img' for dirpat ...

  8. JPG文件结构分析

    [转自网络  作者:一 江秋水] 一.简述 JPEG是一个压缩标准,又可分为标准 JPEG.渐进式JPEG及JPEG2000三种: ①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支 ...

  9. ue-cli3 取消eslint校验代码

    参考链接:https://www.cnblogs.com/sjie/p/9884362.html

  10. SpringBoot异步编程

    异步调用:当我们执行一个方法时,假如这个方法中有多个耗时的任务需要同时去做,而且又不着急等待这个结果时可以让客户端立即返回然后,后台慢慢去计算任务.当然你也可以选择等这些任务都执行完了,再返回给客户端 ...