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

  • 相关阅读:
    姚明如何理财
    转:韩国“抢文化”与中国的“文化洁癖”
    转:关于IDL程序的发布
    GIS相关网站
    【转】:身为男人应做的十件事情
    转:关于稀少控制点下遥感影像纠正的主要研究成果
    转:E都市创业经历
    转载:OSSIM简介
    市场营销学课程
    C#中判断是否为数字&是否为整除(转)
  • 原文地址:https://www.cnblogs.com/qiudongxu/p/8328291.html
Copyright © 2011-2022 走看看