0

看，我正在使用 Google Maps JavaScript API v3。用户填写地址，我显示该地址的街景。一切都很好（很多位置都很好），直到输入一个像“Laken”这样的位置。它只是显示灰色，没有别的。我想阻止用户继续使用灰色图像而不是谷歌地图街景的下一页。

当我填写 Laken 时，getPanoramaByLocation() 函数返回 status == "OK"，因为它找到了一些东西，但它不是可见的图像，它只是灰色的。如何防止 API 这样做？例如，当您无法显示此位置（灰色）时，显示附近的下一个可用位置。

这是代码的摘录：

功能：

<script type="text/javascript">
//this is a standard location that I show when te user starts
 var map;
    var huis_lat,huis_lng;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
      });

      //SAVE HOMELAT&LONGT 
      $('#geocoding_form').submit(function(e){



        var address=document.getElementById("address").value;
    e.preventDefault();
        GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status)
          {

            if(status=='OK'){
              var latlng = results[0].geometry.location;          
              huis_lat=latlng.lat();
              huis_lng=latlng.lng();
              verander(huis_lat,  huis_lng);
              document.getElementById("div_overlayStart").style.display="none";
              document.getElementById("div_overlayThuis").style.display="block";          

            }
            else if(!address) //no address
            {
            alert("fout?")
            document.getElementById('alarm1').innerHTML = 'FILL IN ADDRESS';
            }
            else if(status=='UNKNOWN_ERROR')
            {
            document.getElementById('alarm1').innerHTML = 'UNKNOWN ERROR!';
            }
            else if(status=='ZERO_RESULTS')
            {
            document.getElementById('alarm1').innerHTML = 'UNKNOWN ADDRESS!';
            }
          }
        }); 

      });
    });
</script>

HTML：

EX：填写：Kongingslaan 1, Laken

<body>

<form method="post" id="geocoding_form">

<div class="input">

<input type="text" id="address" name="address" />

<button type="submit" class="linksSocial" style="border: 0; background: transparent">
<img src="images/btn_job.png" width="231" heght="36" alt="submit" />
</button>

</div>
</form>
</body>

函数阳台（）：

<script type="text/javascript">
function verander(google_lat, google_lng) {
    var bryantPark = new google.maps.LatLng(google_lat, google_lng);
    var panoramaOptions = {
      position:bryantPark,
      pov: {
        heading: 185,
        pitch:0,
        zoom:1,
      },
      panControl : false,
      streetViewControl : false,
      mapTypeControl: false,
      overviewMapControl: false ,
      linksControl: false,
      addressControl:false,
      zoomControl : false,
    }
    map = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
    map.setVisible(true);
  }
</script>
4

5 回答 5

3

用于google.maps.StreetViewService.getPanoramaByLocation()确定给定位置是否有可用的全景图。

于 2013-07-03T10:30:24.480 回答
3

快速而肮脏的解决方案。我注意到在这个问题上调整窗口大小对我有用。如果您通过 js 触发事件，它也可以工作。

window.dispatchEvent(new Event('resize'));
于 2015-05-12T14:04:57.910 回答
0

试试这个 ：

$(document).ready(function(){
    var map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333
    });

    //SAVE HOMELAT&LONGT 
    $('#geocoding_form').submit(function(e) {
        e.preventDefault();
        var address = $('#address').val().trim();
        if(!address.length) {
            $('#alarm1').html('Fill in your address!');
        }
        GMaps.geocode({
            address: address,
            callback: function(results, status) {
                if(status !== 'OK' || results.length == 0) {
                    $("#div_overlayStart").show();
                    $("#div_overlayThuis").hide();
                }
                if(status !== 'OK') {
                    $('#alarm1').text('Something went wrong!');
                }
                else if(results.length == 0) {
                    $('#alarm1').html('No results found!');
                }
                else {
                    $('#alarm1').text('');
                    var latlng = results[0].geometry.location;
                    verander(latlng.lat(), latlng.lng());
                    $("#div_overlayStart").hide();
                    $("#div_overlayThuis").show();
                }
            }
        });
    });
});
于 2013-07-03T10:28:44.240 回答
0

我也遇到了街景在某些位置显示“灰色”的问题。

我不喜欢这里给出的解决方案。

在另一篇文章中查看我的解决方案，这也与街景在某些位置显示为“灰色”有关 -->

谷歌地图街景图块最初不会在 Firefox 中加载，只有在拖动之后

于 2014-09-17T15:41:09.827 回答
-1

这解决了问题：

 <script type="text/javascript">
var map;
var huis_lat,huis_lng;
var richting = 0;
$(document).ready(function(){
 map = new GMaps({
    el: '#map',
    lat: -12.043333,
    lng: -77.028333
});


        //SAVE HOMELONG/LAT IN VAR
        $('#geocoding_form').submit(function(e){



        var address=document.getElementById("address").value;

        /* STATUS
        OK  The request was successful.
        UNKNOWN_ERROR   The request could not be successfully processed, yet the exact reason for failure is unknown.
        ZERO_RESULTS    There are no nearby panoramas.
        */

//CHECK IF ADDRESS IS VALID (IS THEIR A VALID X/Y COORDINATE FOR IT?)


        e.preventDefault();
        GMaps.geocode({
        address: $('#address').val().trim(),
        callback: function(results, status)
        {

        if(status=='OK'){
        var latlng = results[richting].geometry.location; 
        huis_lat=latlng.lat();
        huis_lng=latlng.lng();
        verander(huis_lat, huis_lng);
        document.getElementById("div_overlayStart").style.display="none";
        document.getElementById("div_overlayThuis").style.display="block"; 

        }
        else if(!address) //no address
        {
        document.getElementById('alarm1').innerHTML = 'Gelieve u adres in te vullen!';
        }
        else if(status=='UNKNOWN_ERROR')
        {
        document.getElementById('alarm1').innerHTML = 'Er ging iets mis (onbekende fout)!';
        }
        else if(status=='ZERO_RESULTS')
        {
        document.getElementById('alarm1').innerHTML = 'Er is van deze locatie geen streetview beschikbaar!';
        }
        }
        }); 

        });
        });

//+1 one for the array results[richting].geometry.location

        function verhoog(){    
        var address=document.getElementById("address").value;

            richting++;

            //e.preventDefault();
            GMaps.geocode({
              address: $('#address').val().trim(),
              callback: function(results, status)
              {

                if(status=='OK'){
                  var latlng = results[richting].geometry.location;     

                  huis_lat=latlng.lat();
                  huis_lng=latlng.lng();
                  verander(huis_lat,  huis_lng);
                  document.getElementById("div_overlayStart").style.display="none";
                  document.getElementById("div_overlayThuis").style.display="block";          

                }
             }
            }); 

      }
</script>

检查这些 X/Y 坐标的全景图（街景）是否可见（不是灰色）。我使用函数 getPanoramaByLocation 来确定这一点。这将返回与前一个类似的状态。如果有 ZERO_RESULTS（=灰色区域），它会激活函数 verhoog()，将结果数组增加 1。

<script type="text/javascript">

var map;

function verander(google_lat, google_lng) {  

    var bryantPark = new google.maps.LatLng(google_lat, google_lng);

//CHECK FOR GREY ZONE

     var client = new google.maps.StreetViewService();
                client.getPanoramaByLocation(bryantPark, 50, function(result, status) {
                    if (status == "ZERO_RESULTS") {
                       verhoog();

                    }
                    else if(status == "OK")
                    {
                        var panoramaOptions = 
                        {
                          position:bryantPark,
                          pov: {
                            heading: 185,
                            pitch:0,
                            zoom:1,
                          },
                          panControl : false,
                          streetViewControl : false,
                          mapTypeControl: false,
                          overviewMapControl: false ,
                          linksControl: false,
                          addressControl:false,
                          zoomControl : false,
                        }
                        map = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"), panoramaOptions);
                        map.setVisible(true);
                    }

                    else if(status=='UNKNOWN_ERROR')
                    {
                    alert("Er ging iets mis");
                    }

                });  

  }

</script>
于 2013-07-04T10:18:55.777 回答