首先要注册百度地图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. jquery腾讯换肤的一些技术实现

    //检查cookie if($.cookie("skinID")){ $("#cssSkin").attr("href","/st ...

  2. ubuntu 16.04 数据库mysql安装与管理

    1.安装mysql的客户端与服务器端 $>sudo apt-get install mysql-server mysql-client 2.管理服务 1.启动 $>sudo service ...

  3. PHP：验证手机号码合法性

    文章来源:http://www.cnblogs.com/hello-tl/p/7592333.html /** * [verifyPhone description] 效验手机号码合法性 * @par ...

  4. 创建Tensor

    目录 创建Tensor numpy, list numpy list zeros, ones, fill zeros ones fill random 打乱idx后,a和b的索引不变 constant ...

  5. 升级到Offiec 2016后 Power View 不见了的处理方法

    好吧 并不是没有了,而只是快捷方式需要手动的调整出来, 过程还是挺复杂,给一个官方文档吧. Turn on Power View in Excel 2016 for Windows https://s ...

  6. java读utf8 的txt文件，第一个字符为空或问号问题

    参考:https://blog.csdn.net/yangzhichao888/article/details/79529756 https://blog.csdn.net/wangzhi291/ar ...

  7. 【转】Java的path,classpath,java_home环境变量的配置与具体含义

    对于一个Java初学者来说,第一步要做的是安装jdk并配置环境变量,一般按照书上或者网上的步骤,一步步照着做就行了,但是对于初学者来说,很多问题没有解决,比如为什么很多配置方法各不相同,却都能够配置成 ...

  8. NOIP2013提高组D2T3 华容道

    n<=30 * m<=30 的地图上,0表示墙壁,1表示可以放箱子的空地.q<=500次询问,每次问:当空地上唯一没有放箱子的空格子在(ex,ey)时,把位于(sx,sy)的箱子移动 ...

  9. Linux下汇编语言学习笔记34 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  10. 牛客网 中南林业科技大学第十一届程序设计大赛J题 二分+线段树

    https://www.nowcoder.com/acm/contest/124#question 题意  找第一个不小于K的数的下标,然后对它前一个数加一 解析   我们可以维护一个最大值数组  1 ...