首先要注册百度地图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. ORACLE in与exists语句的区别（一）

    select * from Awhere id in(select id from B) 以上查询使用了in语句,in()只执行一次,它查出B表中的所有id字段并缓存起来.之后,检查A表的id是否与B ...

  2. 题解 洛谷P4550/BZOJ1426 【收集邮票】

    这显然是一道概率的题目(废话) 设发\(f[i]\)表示买到第\(i\)张邮票还需要购买的期望次数,\(g[i]\)表示买到第\(i\)张邮票还需要期望花费的钱. 那么答案显然为\(g[0]\),我们 ...

  3. ProtoBuf - Arena

    1.概述 最近看 Protocal Buffer 的源码,初次见到这个库源自陈硕的 muduo ,便打算看一看,在此做一下记录.官网文档不能访问,只能凭借代码的自己理解,查看的源码版本为 3.6.0. ...

  4. assert.notStrictEqual()详解

    严格不相等测试,由不全等运算符确定(===). const assert = require('assert'); assert.notStrictEqual(1, 2); // OK assert. ...

  5. 详细了解为什么支持Postman Chrome应用程序已被弃用？

    本地postman chrome插件确实也无法正常使用,只有Postman官方自己的软件应用程序可以使用.笔者多少追溯终于知道原因,并紧急上线了不同操作系统版本的Postman应用程序. 为什么近期P ...

  6. （dede）织梦系统二次开发笔记

    (dede)织梦系统二次开发记录 --soulsjie 一.模板常用文件说明 模板文件都在文件夹templets下,我们以默认模板(default)为例,对模板文件结构进行分析: 首页模板文件目录 \ ...

  7. Hadoop入坑记

    Hadoop入坑记 按照官方给的伪分布式配置 etc/hadoop/core-site.xml: <configuration> <property> <name> ...

  8. UVA 1995 I can guess the structer

    模 拟 /*by SilverN*/ #include<algorithm> #include<iostream> #include<cstring> #inclu ...

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

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

  10. hdu - 2066 一个人的旅行(基础最短路)

    http://acm.hdu.edu.cn/showproblem.php?pid=2066 把与草儿相连的城市最短距离置为0,然后进行dijkstra,在t个城市里找出距离最近的一个即可. #inc ...