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

代码：

<!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. leetcode 79. Word Search 、212. Word Search II

    https://www.cnblogs.com/grandyang/p/4332313.html 在一个矩阵中能不能找到string的一条路径 这个题使用的是dfs.但这个题与number of is ...

  2. 利用sorket实现聊天功能-服务端实现

    工具包 package loaderman.im.util; public class Constants { public static final String SERVER_IP = " ...

  3. Flutter参数的传递和接收

    上次只写了方法和参数,这次写了完整的示例,页面间参数的传递和接收的示例. 1.参数传递 用在程序上解释就是比如你进入一个商品选择列表,当你想选择一个商品的具体信息的时候,你就要传递商品编号,详细页面接 ...

  4. Flutter酷炫的路由动画效果

    现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...

  5. 当微信小程序遇到AR（四）

    当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 本课程需要一定的基础:微信开发者工具,JavaS ...

  6. 关于使用Arduino做开发的理解

    转载自arduino中文社区 https://www.arduino.cn/thread-5414-1-1.html 见到很多人对Arduino的开发方法 .应用场景有误解,特别开个帖子说明下. 误解 ...

  7. Java High Level REST Client 之 创建索引

    1. 创建索引请求 CreateIndexRequest request = new CreateIndexRequest("twitter"); 2.设置 2.1 分别设置 2. ...

  8. 【VS开发】MFC中调用C函数模块的解决方案

    [VS开发]MFC中调用C函数模块的解决方案 标签(空格分隔): [VS开发] 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:最近调试基于MFC的程序 ...

  9. Goahead 编译

    目录 Goahead 目录说明 Ubuntu编译 交叉编译 方便测试 参考 title: Goahead date: 2019/11/6 09:45:01 toc: true --- Goahead ...

  10. C语言I博客作业12—学期总结

    一.我学到的内容 二.我的收获(包括我完成的所有作业的链接+收获)不能只有作业链接,没有收获 作业次数 作业链接 第一次 C语言I博客作业01 第二次 C语言I博客作业02 第三次 C语言I博客作业0 ...