问题描述
看，我正在使用Google Maps JavaScript API v3.用户填写一个地址，然后我显示该地址的街景.一切都很好(很多位置都能正常工作)，直到输入"Laken"之类的位置.它只是显示灰色，没有其他显示.我想防止用户继续使用灰色图像而不是Google地图街景视图转到下一页.
Look, I'm using Google Maps JavaScript API v3. The user fills in an address and I show the streetview of that address. Everything's fine (a lot of locations work perfectly), till a enter a location like "Laken". It just displays grey, nothing else. I want to prevent the user from continuing to the next page with a grey image instead of a google maps streetview.
当我填写Laken时，getPanoramaByLocation()函数返回status =="OK"，因为它找到了一些东西，但它不是可见的图像，只是灰色的.如何防止API这么做?例如，当您无法显示此位置(为灰色)时，请显示附近的下一个可用位置.
When I fill in Laken, the getPanoramaByLocation() function returns status == "OK", because it has found something, but its not a visible image, it's just grey. How can I prevent the API from doing this? Something like, when you can't display this location(is grey), display the next available location nearby.
以下是代码的摘录:
功能:
<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:填写:Laken的Kongingslaan 1，
EX: Fill in: 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():
Function 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>
推荐答案
这解决了问题:
<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.
Check if the panorama (streetview) for these X/Y coordinates is visible (not grey). I use the function getPanoramaByLocation to determine this. This returns a status like the previous one. If there are ZERO_RESULTS (=grey zone) it activates the function verhoog() that increments the array of results by 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>
这篇关于在Google Maps JavaScript API v3中引发灰色街景位置的异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！