#google-maps-api-3 #google-street-view
#google-maps-api-3 #google-просмотр улиц
Вопрос:
У нас есть стандартная карта (MapTypeId.ДОРОЖНАЯ КАРТА) с маркером на ней. Над картой находится кнопка с надписью «Показать StreetView». Если пользователь нажимает на него, он загружает StreetView в положении маркера (в том же div). Кнопка меняется на «Скрыть StreetView», и при нажатии карта возвращается к стандартной дорожной карте. Пользователи также могут использовать ‘pegman’ для имитации того же самого, что и вы, очевидно.
Проблема началась, когда в месте расположения маркера не было фактического просмотра улиц. Мы справились с этим с помощью прослушивателя событий, если streetview недоступен, отображается сообщение, информирующее пользователя, и возвращает false, чтобы предотвратить «показ» несуществующего streetview. Работал отлично, за исключением случаев, когда пользователь пытался использовать ‘pegman’ — потому что мы уже загрузили (но не отобразили) streetview (которого там не было). Когда пользователь в первый раз удалил разметку на карте, ничего не произошло, но наша кнопка «Показать / скрыть» изменилась. При втором запуске pegman он изменился на streetview, но наша кнопка «показать / скрыть» теперь не работала (она отображала «показать вид улицы», когда уже была там, и «скрыть вид улицы», когда была включена в дорожную карту.
Мы попытались изменить структуру нашего кода — streetview (var panorama = …) инициализируется только с помощью функции javascript ‘onclick’ (изначально она была включена в функцию ‘loadMap’, теперь она была разделена на другую функцию) на нашей кнопке показать / скрыть — если streetview доступен, внесите в него большие изменения и измените кнопку, если нет, верните false и отобразите сообщение пользователю. Это отлично работает, но теперь, если пользователь использует ‘pegman’ для перехода к streetview, кнопки не меняются, потому что они были разделены на другую функцию.
Я на грани срыва, три дня пытаюсь использовать всевозможные опции и не могу понять, как прослушивать в функции ‘loadMap’ для ‘изменения streetview с помощью удаления pegman’ (смотрите прослушиватель событий ‘visible_changed’ в коде loadMap ниже) — Если я смогу это выяснить, я могу изменить отображение кнопки, но, хоть убейте, я не могу этого понять (исследовал мутации DOM для прослушивания отображения streetview, но не очень «кроссбраузерный», что важно, поскольку сайт получает более 4 миллионов просмотров в месяц).
Вот функция ‘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...
И это функция loadStreetView, которая вызывается с помощью действия «onclick» на кнопке Показать / Скрыть Streetview над картой (не то чтобы я думаю, что вам это понадобится, все это отлично работает для данного варианта использования, это чертово удаление pegman, которое не работает, но вы никогда не знаете …)
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');
});
}
Комментарии:
1. спасибо за публикацию этого вопроса, это помогло мне исправить глупую ошибку
Ответ №1:
Ваш прослушиватель событий для ‘visible_changed’ находится на объекте карты, а не на панораме. У объекта 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> }
amp;nbsp; 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.
По крайней мере, так это выглядит для меня.