首先要注册百度地图API。

1、登录百度地图开放平台http://lbsyun.baidu.com

注册账号，完善信息，点击网站右上角的“API控制台”，点击，创建应用。

应用类型选择：“浏览器端”，应用服务全选，Referer白名单：*

点击提交。会生成一个访问应用（AK）。

AK码记下来，后面页面中要用它来引出百度地图。

2、创建html网页。部分代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title

         <!-- 将百度地图API引入，设置好自己的key -->

         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=刚才创建应用的AK"></script>

    </head>

    <body>

    <label >纬度：</label>

            <input type="text" id="lat" value="" readonly>

    <label>经度：</label>

            <input type="text" id="lng" value="" readonly>

    <label>地址 ：</label>

            <input type="text" id="address" readonly>

        <button type="button" id="open">

               点击显示地图获取地址经纬度

            </button>

    <div id='allmap' style='width: 60%; height: 60%; position: absolute; display: none'></div>

    </body>

</html>

3、JS代码

<script type="text/javascript">

    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.404412, 39.914714);

    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('address').value = address;

            }

        });

        addMarker(e.point);

    }

</script>

效果图：

PS：需要注意一点的是，js代码要写在body后面。否则地显示不出来

JS 通过选择百度地图地址获取经纬度自动填充到文本框中的方法的更多相关文章

  1. [WPF] 浏览百度地图并获取经纬度地址信息

    项目中需要利用登记的区域和地址在百度地图上定位,并获取该地址的经纬度. 本次功能对我来说主要难点如下:1.百度地图API的基本使用方法,请首选使用百度地图的JavaScript大众版(PS:之前使用W ...

  2. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  3. 通过百度地图API获取经纬度以及两点间距离

    package com.baidumap; import java.io.BufferedReader; import java.io.IOException; import java.io.Inpu ...

  4. 批量调用百度地图API获取地址经纬度坐标

    1 申请密匙 注册百度地图API:http://lbsyun.baidu.com/index.php?title=webapi 点击左侧 “获取密匙” ,经过填写个人信息.邮箱注册等,成功之后在开放平 ...

  5. Python 读取照片的信息：拍摄时间、拍摄设备、经纬度等，以及根据经纬度通过百度地图API获取位置

    通过第三方库exifread读取照片信息.exifread官网:https://pypi.org/project/ExifRead/ 一.安装exifreadpip install exifread ...

  6. angularjs_百度地图API_根据经纬度定位_示例

    百度API--Demo地址:   http://lbsyun.baidu.com/jsdemo.htm#i8_4 本例是在angular.js使用的百度地图根据经纬度定位的API:(正常的页面写法基本 ...

  7. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  8. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  9. HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"&g ...

随机推荐

  1. spring springmvc 获取所有url

    @Autowired private RequestMappingHandlerMapping handlerMapping; @Test public void getAllApi() { Map& ...

  2. ffmpeg裁剪

    http://it6655.com/2012/09/ffmpeg-9-2-html 1 configure参数 1 通用选项 在linux下进入终端,找到ffmpeg解压位置,输入如下命令: root ...

  3. db2，差集

    --漏报的数据 FROM A LEFT JOIN A′ ON 交集的条件 WHERE A′.xx IS NULL --多报的数据 FROM A′ LEFT JOIN A ON 交集的条件 WHERE ...

  4. linux traceroute-显示数据包到主机间的路径

    博主推荐:更多网络测试相关命令关注 网络测试  收藏linux命令大全 traceroute命令用于追踪数据包在网络上的传输时的全部路径,它默认发送的数据包大小是40字节. 通过traceroute我 ...

  5. Buffer.allocUnsafe()

    Buffer.allocUnsafe(size) size {Number} 分配一个 size 字节大小的新的非零填充(non-zero-filled)的 Buffer.size 必须小于等于 re ...

  6. matplotlib.pyplot.pcolormesh

     matplotlib.pyplot.pcolormesh(*args, alpha=None, norm=None, cmap=None, vmin=None, vmax=None, shading ...

  7. 80-Force Index，强力指标.（2015.7.1）

    Force Index 强力指标 Index,强力指标.(2015.7.1)" title="80-Force Index,强力指标.(2015.7.1)"> 观井 ...

  8. 初学数位DP

    所谓数位dp,字面意思就是在数位上进行dp,数位的含义:一个数有个位.十位.百位.千位.等等,数的每一位就是数位. 数位DP一般应用于: 求出给定区间[A,B]内,符合条件P[i]的数 i 的个数. ...

  9. <vue>…… v-if 与 v-show ……//

    #v-if 用法: 根据表达式的值的真假条件渲染元素.在切换时元素及它的数据绑定 / 组件被销毁并重建.如果元素是 <template> ,将提出它的内容作为条件块. 当条件变化时该指令触 ...

  10. 在jupyter notebook 中编辑公式

    jupyter notebook是一个python的交互式开发环境,广泛应用于数据分析的场景下. 在jupyter notebook中,还可以很方便的编辑数学公式. 1.Markdown状态 编辑公式 ...