zoukankan      html  css  js  c++  java
  • 谷歌地图 API 开发之获取坐标以及街道详情

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

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

    <!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
                });
                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="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE&callback=initMap" async defer></script>
    </body>
    
    </html>
    

    注意:请引入自己本地的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里有四个参数:latlnglocation_typeresult_typekey,具体概念以及参数详解,请参考下一章的 谷歌地图API 开发 之 Geocoding API

  • 相关阅读:
    ubuntu19.04 redis启动和停止及连接
    ubuntu Redis安装及配置
    Django 基本使用及目录结构
    selenium设置chrome请求头
    多进程爬虫python——实例爬取酷狗歌单
    2020第一周学习记录
    爬取博客园最新文章
    python下用selenium的webdriver包如何在执行完点击下一页后没有获得下一页新打开页面的html源代码
    质量属性六个常见属性《钉钉》场景分析
    warnings.warn('Selenium support for PhantomJS has been deprecated, please use headless '报错
  • 原文地址:https://www.cnblogs.com/qiudongxu/p/8328291.html
Copyright © 2011-2022 走看看