首先要注册百度地图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. 简单的学生选课系统——基于Servlet+Ajax

    以前挖的坑,早晚要往里掉.基础太薄弱,要恶补.在此程序前,我还对Servlet没有一个清晰的概念:一周时间写好此程序之后,对Servlet的理解清晰许多. 这周一直在恶补Spring,今天正好完成了S ...

  2. 笔试算法题（29）：判断元素范围1到N的数组是否有重复数字 & 计算整数的7倍

    出题:一个长度为N的数组,其中的元素取值范围是1到N,要求快速判断数组是否存在重复数字: 分析: 解法1:如果N个元素的范围都是在1到N,所以如果没有重复元素,则每一个位置恰好可以对应数组中的一个元素 ...

  3. (十二)python3 迭代器

    可以直接作用于 for 循环的对象统称为可迭代对象: Iterable .一类是集合数据类型,如 list . tuple . dict . set . str 等,一类是 generator ,包括 ...

  4. 九度oj 题目1077：最大序列和

    题目1077:最大序列和 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6435 解决:1931 题目描述: 给出一个整数序列S,其中有N个数,定义其中一个非空连续子序列T中所有数的和为T ...

  5. POJ 1679 判最小生成树的不唯一性 或 利用次小生成树求解

    题目大意: 给定一个无向图,寻找它的最小生成树,如果仅有一种最小生成树,输出所有边的和,否则输出unique! 根据kruscal原理来说,每次不断取尽可能小的边不断添加入最小生成树中,那么可知如果所 ...

  6. UVA 10652 凸包问题

    #include <cstdio> #include <cstring> #include <algorithm> #include <cmath> # ...

  7. 【HDOJ6146】Pokémon GO（DP，计数）

    题意:一个2*n的矩阵,从任意一格出发,不重复且不遗漏地走遍所有格子,问方案数 mo 10^9+7 n<=10000 思路:因为OEIS搜出来的两个数列都是错误的,所以考虑DP 设B[i]为2* ...

  8. Floyd算法——保存路径——输出路径 HDU1385

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1385 参考 http://blog.csdn.net/shuangde800/article/deta ...

  9. POJ 1064_Cable master

    题意: 给定一系列长度的电缆,将他们切成K条相等长度的电缆,问每条最长有多长? 分析: 对长度进行二分,判断能否满足K条. 二分搜索: 在求解最大化或最小化问题中,能够比较简单的判断条件是否满足,那么 ...

  10. ibatis的初识

    在工作中,服务端的框架基本上是struts+spring+ibatis+velocity.ibatis曾经没有接触到,而曾经使用的hibernate在公司居然没碰着.同样都是数据库封装,为什么没有选择 ...