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

代码：

<!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. js for (i=0;i<a.length;a[i++]=0) 中等于0怎么理解？

    js的问题for (i=0;i<a.length;a[i++]=0) 中等于0怎么理解? 很奇怪的一个for循环 竟然是将原来数组的数据全改为0

  2. 008-log-slf4j+log4j

    一.slf4j+log4j 1.1.POM依赖 <!-- 日志 门面 --> <dependency> <groupId>org.slf4j</groupId ...

  3. Qt编写数据可视化大屏界面电子看板12-数据库采集

    一.前言 数据采集是整个数据可视化大屏界面电子看板系统核心功能,没有数据源,这仅仅是个玩具UI,没啥用,当然默认做了定时器模拟数据,产生随机数据,这个可以直接配置文件修改来选择采用何种数据采集方法,总 ...

  4. fidder修改参数

    进入截栏模式 inspectors,webfroms run

  5. Delphi实现树型结构具体实例

    unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  6. 五指MUD协议

    //MUD转义协议 #ifndef __WZMUD__ #define __WZMUD__ #define WZKEY "ZWUxMTIyMDAwMw==" #define ESA ...

  7. DataFrame执行groupby聚合操作后，如何继续保持DataFrame对象而不变成Series对象

    刚接触pandas不久,在处理特征时,碰到一个恶心的问题:用groupby聚合后,之前的dataframe对象变成了series对象,聚合的字段变成了索引index,导致获取这些字段时很麻烦,后面发现 ...

  8. HOG算法总结

    1.HOG特征提取所针对的图像的尺寸是固定的.输入的图像应首先resize到这个尺寸. 2.尺寸的划分3个等级:window,block,cell window即输入的需要提取特征的图片大小.然后将w ...

  9. 【FFMPEG】FFMPEG介绍

    FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它包括了目前领先的音/视频编码库libavcodec. FFmpeg是在Linux下开发出来的,但它可以在包括Wi ...

  10. Zookeeper概述、特点、数据模型

    Zookeeper 1.Zookeeper概述 Zookeeper是一个工具,可以实现集群中的分布式协调服务. 所谓的分布式协调服务,就是在集群的节点中进行可靠的消息传递,来协调集群的工作.   Zo ...