Google MapsV3 StreetView问题 - 如果无法使用街景,则无法使用
我们有一个带有标记的标准贴图(MapTypeId.ROADMAP)。地图上方是一个按钮,显示“显示StreetView”。如果用户点击它,它会在标记的位置(在同一个div中)加载StreetView。该按钮更改为“隐藏街景视图”,如果点击,地图将恢复为标准ROADMAP。用户也可以使用“pegman”来模拟相同的bahviour。Google MapsV3 StreetView问题 - 如果无法使用街景,则无法使用
问题出现在标记位置没有可用的实际街景。我们使用事件监听器处理此事件,如果没有街景可用,则会显示一条消息通知用户,并返回false以防止“显示”不存在的街景。工作很好,除非用户试图使用'pegman' - 因为我们已经加载(但不显示)街景(不在此处)。当用户第一次放下地图时,什么都没有发生,但我们的'显示/隐藏按钮'改变了。在第二滴pegman它改变了街景,但是我们的“显示/隐藏按钮”现在已经不起眼了(它已经在那里显示'show street view',并且在ROADMAP上显示'隐藏街景'
我们尝试更改我们的代码结构 - streetview(var panorama = ...)仅通过'onclick'javascript函数初始化(它最初与'loadMap'函数捆绑在一起,现在它已与另一个函数分离)我们的显示/隐藏按钮 - 如果街景可用,对其进行很大的改变并改变按钮,如果不返回false并向用户显示消息,这很好,但是现在如果用户使用'pegman'去街景按钮,不改变,因为它已经被分离到另一个功能
我在我的白垩结束,三天尝试各种选项,我无法弄清楚如何在'loadMap'函数中侦听'通过pegman丢弃'更改为streetview'(请参阅下的loadMap代码中的'visible_changed'事件侦听器) - 如果我能弄明白这一点,我可以改变按钮的显示方式,但是对于我而言,我无法弄清楚它(调查DOM变化以听取街景的显示,但不是非常“跨浏览器友好”,这对于站点非常重要每月点击量超过400万)。
这里是“loadMap”功能
function loadGMap(lat, lng, nachladenAnzeigen, radialConflict){
// Create the Map variables
mapDiv = document.getElementById('map');
width = parseInt(mapDiv.style.width);
height = parseInt(mapDiv.style.height);
latlng = new google.maps.LatLng(lat, lng);
// Create Map
var mapOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
panControl: false
};
map = new google.maps.Map(mapDiv,mapOptions);
... Code here for laying marker to map...
google.maps.event.addListener(map, 'visible_changed', function(){
alert('please work');
// It doesn't - no alert when pegman is dropped :-(
}
// Check for a street view at the marker position
var streetViewCheck = new google.maps.StreetViewService();
streetViewCheck.getPanoramaByLocation(latlng, 50, function(result, status) {
if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {
streetViewAvailable = 0;
}else{
streetViewAvailable = 1;
}
});
... more code (event listeners, ie, zoom changed, etc...
这是通过在显示/隐藏街景按钮地图(不,我想你上面加入“onClick”行动称为loadStreetView功能会需要这个,这一切都为这种使用情况做工精细,它不工作该死的衣夹下降,但你永远不知道...)为“visible_changed,用于”
function loadStreetView(){
// Make 'Show/Hide StreetView' links above the map work
// Handle the toggle of StreetView 'button' display
if(streetViewAvailable == 0){
noStreetViewVariable = document.getElementById('noStreetView');
noStreetViewVariable.style.display = "inline";
return false;
}else{
panorama = map.getStreetView();
panorama.setPosition(latlng);
panorama.setPov({
heading: 265,
zoom:1,
pitch:0
});
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
$('#button_streetview').attr("src", 'img/buttons/mapview.png');
} else {
panorama.setVisible(false);
$('#button_streetview').attr("src", 'img/buttons/streetview.png');
}
}
google.maps.event.addListener(panorama, 'visible_changed', function(){
if(streetViewAvailable == 0){
$('#button_streetview').attr("src", 'img/buttons/mapview.png');
}
else if(streetViewAvailable == 1){
if (panorama.getVisible() == true) {
$('#button_streetview').attr("src", 'img/buttons/mapview.png');
}
}
});
google.maps.event.addListener(panorama, 'closeclick', function() {
$('#button_streetview').attr("src", 'img/buttons/streetview.png');
});
}
事件侦听器是在地图上对象,而不是全景。 Map对象(v3)没有“visible_changed”事件。
我的解决方案(这对我的作品..)是:
var pano = null ; // on initialize I use this in the global scope, bad, I know... <br>
var map = null ; // likewise <br>
function init(); <br>
map = new google.maps.Map(document.getElementById('map'),
MapOptions); <br>
createPano() ; <br>
... other init stuff here .. <br>
}
function createPano() { <br>
if (pano == null) { <br>
pano = map.getStreetView(); // the api says this creates the default pano object..
<br> }
google.maps.event.addListener(pano, "visible_changed",
function(){ <br>
alert("position is " + pano.getPosition()) ; <br>
// change this to getPanoAndSwitch() when custom panos are available ..
<br> panoFlag = pano.getVisible();
...
rest of code here.
Leastwise,这就是它看起来像我。
感谢您发布此问题,它帮助我修复了一个愚蠢的错误 – user609306 2014-11-06 07:48:18