在Google Maps JavaScript API v3中为灰色街景位置引发异常

看，我使用的是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>

函数verander（）：

<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>

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

快速而肮脏的解决方案。我注意到调整窗口大小对我解决这个问题很有效。如果你通过js触发事件，它也会起作用。

window.dispatchEvent(new Event('resize'));

试试这个：

$(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();
                }
            }
        });
    });
});

我也遇到了StreetView在某些位置显示"灰色"的问题。

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

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

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

这解决了问题：

 <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>

相关内容

最新更新

热门标签：