首先要注册百度地图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. 允许IIS下载无后缀文件及“请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理。”的解决方法

    1)增加MIME类型 ,如下 application/octet-stream 2)注意是"." , ".*"则适用于任何有文件后缀时使用,无后缀请不要加*

  2. Myeclipse下载

    地址:http://www.jb51.net/softs/593889.html#download

  3. django 标签

    django标签 {% if/for/ifequal/ifnotequal condition %} ...{{ name|first|lower}}{# interpretation:lower t ...

  4. [Luogu] P3846 [TJOI2007]可爱的质数

    题目描述 给定一个质数P(2<=P<2312^{31}231),以及一个整数B(2<=B<P),一个整数N(2<=N<P). 现在要求你计算一个最小的L,满足BL≡ ...

  5. ubuntu环境安装docker

    查看已安装的docker apt list docker* 如果已安装,并且需要卸载,则执行以下命令: apt remove docker* 更新apt索引 apt update apt需要支持HTT ...

  6. 零基础入门学习Python（6）--Python之常用操作符

    前言 Python当中常用操作符,有分为以下几类.幂运算(**),正负号(+,-),算术操作符(+,-,*,/,//,%),比较操作符(<,<=,>,>=,==,!=),逻辑运 ...

  7. delphi GDI+ [1]

    摘抄自:万一的博客 安装头文件:http://www.cnblogs.com/del/archive/2008/06/06/1215319.html 目录 基本使用方法(绘制直线) 绘制一组直线 绘制 ...

  8. Python之模块和包导入

    Python之模块和包导入 模块导入: 1.创建名称空间,用来存放模块XX.py中定义的名字 2.基于创建的名称空间来执行XX.py. 3.创建名字XX.py指向该名称空间,XX.名字的操作,都是以X ...

  9. python+selenium之元素的八大定位方法

    以百度搜索框为例,先打开百度网页 1.点右上角爬虫按钮 2.点左下角箭头 3.讲箭头移动到百度搜索输入框上,输入框高亮状态 4.下方红色区域就是单位到输入框的属性: <input id=&quo ...

  10. 关于Google浏览器Unable to preventDefault inside passive event listener due to target being treated as passive.的解决方案

    最近写react项目的时候,引用了antd-mobile,在使用滚动组件的时候,发现谷歌浏览器会报以下警告 最初我以为是antd-mobile的问题导致的,然后我就无查看了之前的vue的项目,发现了类 ...