谷歌地图 API 开发之获取坐标以及街道详情

时间：2022-09-08 07:25:13

自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求。
估计这个对于新手来说，还是比较麻烦的，因为从官网上找这个也并不是很好找，要找好久的，运气好的可能会一下子找到。

献上自己写的测试案例。代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>Simple Map</title>

    <meta name="viewport" content="initial-scale=1.0">

    <meta charset="utf-8">

    <style>

        html,

        body {

            height: 100%;

            margin: 0;

            padding: 0;

        }

        #map {

            height: 100%;

        }

    </style>

</head>

<body>

    <div id="map"></div>

    <script>

        function initMap() {

            var myLatlng = {

                lat: 39.921323,

                lng: 116.426239

            };

            var marker ;

            var markersArray = [];

            var map = new google.maps.Map(document.getElementById('map'), {

                zoom: 12,

                center: myLatlng

            });

            // ---- Google隐藏 ----

            var isFirstLoad=true;

            //地图瓦片加载完成之后的回调

            google.maps.event.addListener(map, 'tilesloaded', function () {

            if (isFirstLoad) {

                    hideLogo();

                    isFirstLoad=false;

                }

            });

            function hideLogo() {

                $("#map .gm-style-cc").hide();

                $("#map [title='点击以在 Google 地图上查看此区域']").hide();

            }

            // ---- Google隐藏 ----

            map.addListener('click', function(e) {

                addMarker(e.latLng, map);

                //根据经纬度获取 当前地理信息

                var latLngData = e.latLng.lat().toFixed(6)+','+e.latLng.lng().toFixed(6);

                console.log(latLngData)

                $.ajax({

                    type:"post",

                    url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE",

                    async:true,

                    success:function(data){

                        console.log(data)

                        var site = latLngData+'<br />'+data.results[0].formatted_address;

                        console.log(site)

                        var infowindow = new google.maps.InfoWindow({

                            content: site

                        });

                        infowindow.open(map,marker); //弹出信息提示窗口

                    }

                });

            });

            //添加坐标对象

            function addMarker(latLng, map) {

                if(markersArray.length>0){

                        markersArray[0].setMap(null);

                };

                markersArray.shift(marker)

                marker = new google.maps.Marker({

                    position: latLng,

                    map: map

                });

                markersArray.push(marker);

            }

        }

    </script>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>

</body>

</html>

<script>

    $(window).load(function(){

        //$("#map [title='点击以在 Google 地图上查看此区域']").hide();

        //$('.gm-style-cc').hide();

    });

</script>

注意：请引入自己本地的jquery，因为要用的ajax请求，谷歌的地理服务接口。

代码的核心就在于请求的URL：

url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE"

这个是经纬度反向地理编码， 这段url里有四个参数：latlng，location_type，result_type，key，具体概念以及参数详解，请参考下一章的 谷歌地图API 开发 之 Geocoding API

谷歌地图 API 开发之获取坐标以及街道详情的更多相关文章

  1. 谷歌地图 API 开发之添加标记（解析以及补充）

    今天又看了下官网,发现官网上有地图标记的详细说明.当时居然眼瞎看不见,还琢磨了好久...#$%^&,一定是项目太急,没看到(^o^)/~地址:https://developers.google ...

  2. 百度地图api开发：根据坐标获得地理描述地址

    // 创建地理编码实例              var myGeo = new BMap.Geocoder();              // 根据坐标得到地址描述            myGe ...

  3. 谷歌地图api 开发 （转载）

    https://www.cnblogs.com/520lin/p/5800024.html

  4. 深入浅出百度地图API开发系列（1）：前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  5. 深入浅出百度地图API开发系列（2）：创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  6. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  7. 【百度地图API】自行获取区域经纬度的工具

    原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...

  8. js基于谷歌地图API绘制可编辑圆形与多边形

    之前的工作中需要在谷歌地图上绘制可编辑多边形区域,所以基于谷歌地图API封装了个html页面,通过调用js绘制多边形并返回各点的经纬度坐标:当然首先你要保证你的电脑可以打开谷歌地图... 新建一个ht ...

  9. 简单几行代码使用百度地图API接口分页获取信息

    首发于: 万能助手扩展开发:使用百度地图API接口分页获取信息_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=426 使用 ...

随机推荐

  1. ZOJ Problem Set - 1365 Mileage Bank

    题目不难,主要说下这道题目在输入终止上的问题: 题目要求当输入为0时一次case结束,当输入为#时整个输入全部结束,可以用如下格式解决 while(scanf("%s",str)! ...

  2. whose view is not in the window hierarchy

    参考:http://www.jianshu.com/p/9e90cb866fdf 在做界面跳转的时候,我们经常会用到这两个函数 func dismissViewControllerAnimated(f ...

  3. ubuntu15&period;10 或者 16&period;04 或者 ElementryOS 下使用 Dotnet Core

    这里我们不讲安装,缺少libicu52自行安装. 安装完成后使用dotnet restore或者build都会失败,一是报编译的dll不适合当前系统,二是编译到ubuntu16.04文件夹下会产生一些 ...

  4. PHP 设计模式之观察者模式 &lpar;转载&rpar;

    介绍      现在有两派,有的人建议使用设计模式,有的人不建议使用设计模式!这就向写文章一样,有的人喜欢文章按照套路走,比如叙事性质的文章,时间,地点,人物,事件.而有的人喜欢写杂文或者散文,有的人 ...

  5. OpenGL教程之碰撞检测与模型运动

    下面我们要讨论的是如何快速有效的检测物体的碰撞和合乎物理法则的物体运动,先看一下我们要学的: 1)碰撞检测 ·移动的范围 — 平面 ·移动的范围 — 圆柱 ·移动的范围 — 运动的物体 2)符合物理规 ...

  6. HDU1452Happy 2004（高次幂取模&plus;积性函数&plus;逆元）

    题目意思:2004^x的所有正因数的和(S)对29求余:输出结果: 原题链接 题目解析:解析参照来源:点击打开链接 因子和 6的因子是1,2,3,6; 6的因子和是s(6)=1+2+3+6=12; 2 ...

  7. Solr&lpar;四&rpar;Solr实现简单的类似百度搜索高亮功能-1&period;配置Ik分词器

    配置Ik分词器 一 效果图 二 实现此功能需要添加分词器,在这里使用比较主流的IK分词器. 1 没有配置IK分词器,用solr自带的text分词它会把一句话分成单个的字. 2 配置IK分词器,的话它会 ...

  8. 配置 BizTalk Server

    使用“基本配置”或“自定义配置”配置 BizTalk Server. 基本配置与自定义配置       如果配置使用域组,则进行“自定义配置”. 如果配置使用自定义组名称而不是默认组名称,则进行“自定 ...

  9. Nginx配置静态资源

    静态服务器 静态服务器概念非常简单:当用户请求静态资源时,把文件内容回复给用户. 但是,要把静态服务做到极致,需要考虑的方面非常多: 正确书写header:设置content-type.过期时间等 效 ...

  10. 微信公众号开发（5）---使用开源组件开发公众号OAuth2&period;0网页授权授权登录

    搞清微信公众号授权登录的步骤步骤,我们的开发就完成了一大步 献上github 地址: https://github.com/Wechat-Group/weixin-java-tools/wiki/MP ...

相关文章