Street view API 3 (добавить пользовательскую мини-карту) закрыть кнопку Street view и Pegman

В моем script, когда вы бросаете pegman на карту, он загружает Street View с помощью специальной мини-карты. Вы можете увидеть миникарту с помощью пегмана и переместить ее для просмотра улиц, и она отлично работает.

Однако, когда вы нажимаете кнопку закрытия на экране улицы, мини-карта и вид на улицу закрываются нормально, но пегмен не возвращается в свое положение по умолчанию. Он остается на карте и не может быть повторно сброшен.

Я хочу переместить pegman обратно в позицию по умолчанию, когда Street View закрыт, и если вы снова поместите его на карту, чтобы загрузить Street View, как в первый раз.

онлайн-код http://jsbin.com/ayejim/edit#preview

Это моя функция initialize:

    function initialize() {
var lifestyle = [{}];
  var myOptions = {
    zoom: CITY_MAP_ZOOMING_FACT,
    center: new google.maps.LatLng(CITY_MAP_CENTER_LAT, CITY_MAP_CENTER_LNG),
    mapTypeId: google.maps.MapTypeId.<?php echo $maptype;?>

  }
   map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
   map.setOptions({styles: lifestyle});

    /////////////////////////////
    var g = google.maps;
    var pano, mini;
    var mapdiv = document.getElementById("map_canvas");

    pano = map.getStreetView();


  /** Listen to panorama visibility changes to detect
  * when pegman is dropped onto the map
  * and when Street view is closed
  */

  g.event.addListener(pano, "visible_changed", function() {
   // Street view activated by dropping pegman
   if (!mini && pano.getVisible()) {
    // Container for mini map and close button

    var c = document.createElement("div");
    c.id = "minimap";
    c.style.visibility = "visible";

    var d = document.createElement("div");
    d.id = "closebutton";
    d.onclick = function() {
    // Toggles button icon and moves copyright notice
     var terms = document.getElementById("note");
//    var terms = mapdiv.childNodes[1].childNodes[2];
      if (c.style.visibility == "visible") {
        c.style.visibility = "hidden";
        d.className = "closed";
        terms.style.marginRight = "24px";
      }
      else {
       c.style.visibility = "visible";
       d.className = "";
       terms.style.marginRight = "170px";
      }
    };

    c.appendChild(d);
    mapdiv.appendChild(c);
    mapdiv.appendChild(d);

    mini = new g.Map(c, {
      center: pano.getPosition(),
      zoom: 15,
      mapTypeId: "roadmap",
      disableDefaultUI: true,
      streetViewControl: true,
      streetView: pano,
      styles: lifestyle

    });

    /** Moves the 'Terms' notice to the left
    * to ensure it not covered up.
    * There are two such notices in the document.
    * Make sure to catch the right ones.
    */
    g.event.addListener(mini, "tilesloaded", function() {
     var terms = mini.getDiv().firstChild.childNodes[2];
     terms.style.marginRight = "24px";
     var sv_terms = mapdiv.childNodes[1].childNodes[2];
     sv_terms.id = "note";
     sv_terms.style.marginRight = "170px";
     sv_terms.style.zIndex = "1";
   });
    // Binds mini map center to pano position
    mini.bindTo("center", pano, "position");

    // Street view finished by click on Street view close button
   } else if (mini instanceof g.Map && !pano.getVisible()) {
     mapdiv.removeChild(document.getElementById("minimap"));
    **//initialize(); if try call initialize again pegman back default position but map back to default position too like the first time.and markers hide , i don't know why this happens**
   }
 });
 /////////////////////////
   mgr = new MarkerManager( map );
   google.maps.event.addListener(mgr, 'loaded', function() {
      if (markers) {
         for (var level in markers) {
            google.maps.event.addDomListener( document.getElementById( level ), 'click', function() {
               setCategoryVisiblity( this.id, this.checked );
            });
            for (var i = 0; i < markers[level].length; i++) {

               var details = markers[level][i];
               var image = new google.maps.MarkerImage(details.icons,new google.maps.Size(PIN_POINT_ICON_WIDTH, PIN_POINT_ICON_HEIGHT));
               var myLatLng = new google.maps.LatLng(details.location[0], details.location[1]);
               <?php if(get_current_city_set_zooming_opt() == '1') { ?>
                 multimarkerdata[i]  = new google.maps.LatLng(details.location[0], details.location[1]);
               <?php } ?>
               markers[level][i] = new google.maps.Marker({
                  title: details.name,
                  position: myLatLng,
                  icon: image,
                  clickable: true,
                  draggable: false,
                  flat: true,
                  animation: google.maps.Animation.DROP
               });


            attachMessage(markers[level][i], details.message);
            }
            mgr.addMarkers( markers[level], 0 );
         }
          <?php if(get_current_city_set_zooming_opt() == '1') { ?>
             var latlngbounds = new google.maps.LatLngBounds();

            for ( var j = 0; j < multimarkerdata.length; j++ )
                {
                 latlngbounds.extend( multimarkerdata[ j ] );
                }
               map.fitBounds( latlngbounds );
          <?php } ?>
         mgr.refresh();
      }
   });

    // but that message is not within the marker instance data 
    function attachMessage(marker, msg) {
      var myEventListener = google.maps.event.addListener(marker, 'click', function() {
      if (pano.getVisible()) { 
        infowindow.open(pano, marker); 
      } else { 
      infowindow = new google.maps.InfoWindow(
          { content: String(msg) 
          });
        infowindow.open(map, marker); 
      } 
         if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow(
          { content: String(msg) 
          });
         infowindow.open(map,marker);
      });
    }

}

google.maps.event.addDomListener(window, 'load', initialize);
+3
источник поделиться
1 ответ

Не совсем уверен, почему текущий код не работает, но я также немного скептически отношусь к подходу, который вы используете в текущем коде. Почему бы не сделать отдельный div для панорамы (streetview) и сделать некоторый стиль для map_canvas div для репликации вашего текущего метода (вместо использования мини-div div). Я создал базу в этом jsfiddle (http://jsfiddle.net/svigna/FnrbX/embedded/result/ и http://jsfiddle.net/svigna/FnrbX/ для исходного кода), которые вы можете проверить и использовать в качестве основы для своего решения.

Позвольте мне пропустить вас через мой код - немного взглянув на свойства класса streetView и jquery. Я уверен, что ваш вопрос можно решить.

<body onload="initialize()"> 
  <div id="container">
  <div id="map_canvas" class="bigmap"></div>
  <div id="pano" class="bigmap" style="display:none"></div>
</div>

Первое, во-первых, в надписи мы хотим объявить div для карты и div для панорамы, которая будет привязана к карте. Мы объявляем его в контейнере для стилизации (когда мы хотим наложить карту на панораму). Обратите внимание, что стиль панорамы изначально установлен на display:none, иначе вы увидите область с серым цветом (это панорама без каких-либо данных местоположения, потому что пегмен не установлен).

#container {
  width: 940px;
  height: 640px;
  position: relative;
}
#map_canvas, 
#pano {
  position: absolute;
  top: 0;
  left: 0;
}
#map_canvas {
  z-index: 10;
}
.bigmap{
  width:100%;
  height:100%;
}

.minimap{
  width:480px;
  height:320px;
} 

Стиль здесь по существу задан, чтобы позволить map_canvas div перекрываться над панелью pan, когда pegman становится отброшенным. Я использовал концепцию из этого решения для перекрытия div (Как наложить один div поверх другого div). Классы .minimap и .bigmap позволяют легко переключать map_canvas из одного представления в другое, что будет иметь больше смысла в разделе javascript ниже.

function initialize() {
  var fenway = new google.maps.LatLng(42.345573,-71.098326);
  var panoramaOptions = {
    enableCloseButton : true,
    visible: false
  };
  var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
  var mapOptions = {
    center: fenway,
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetView : panorama
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

до этой точки в javascript мы инициализируем все содержимое карты. это довольно понятное объяснение, чтобы посмотреть на свойства, которые приведены здесь, посмотрите на ссылку google maps api v3 - я нашел, что это очень полезно.

  google.maps.event.addListener(panorama, "visible_changed", function() {
    if (panorama.getVisible() && $("#pano").is(':visible')){
        //moving the pegman around the map
    }else if(panorama.getVisible() && $("#pano").is(':hidden')){
        $("#pano").show();          
        $("#map_canvas").removeClass('bigmap');
        $("#map_canvas").addClass('minimap');
    }
    google.maps.event.addListener(panorama, "closeclick", function() {
        $("#pano").hide();  
        $("#map_canvas").removeClass('minimap');
        $("#map_canvas").addClass('bigmap');        
    });
  });        
}

Примечание: прослушиватели событий все еще объявлены в функции initialize(). Но в основном мы слушаем изменение видимости панорамы, но этого недостаточно, чтобы определить, есть ли фактические данные в элементе pano div. Помните, когда мы устанавливаем отображение Pano div равным нулю, мы можем использовать jquery для проверки видимости. Если это видно, это означает, что это НЕ начальная капля пегмена - если она скрыта, тогда мы заменим класс map_canvas на мини-карту. Также обратите внимание, что мы слушаем closeclick в прослушивателе "visible_changed". Это связано с тем, что visible_changed также включает действие closeclick, поэтому, помещая его внутрь, мы привязываем слушателя к другому. После запуска closeclick мы скроем div pano и изменим map_canvas на нормальный размер.

Самое замечательное в этом подходе - это родное действие "closeclick" на streetView удаляет пегмен с установленной карты и возвращает ее в нормальное состояние (именно это вы и хотели в своей проблеме). Кроме того, чтобы вернуться в исходное положение, вы можете просто сделать map.panTo() в прослушивателе событий "closeclick" в исходное местоположение.

Надеюсь, это то, что вы искали, если это далеко, тогда мои извинения! Я знаю, что это по существу просит вас перепроектировать вашу существующую структуру кода, но просто подумал, что этот подход намного проще и, похоже, делает то же самое, что вы хотите сделать.

+6
источник

Посмотрите другие вопросы по меткам или Задайте вопрос