google-maps - 街景 API 3(添加自定义小 map )关闭按钮街景和街景小人

Question

在我的脚本中，当您将街景小人放到 map 上时，它会加载带有自定义小 map 的街景 View 。您可以看到带有街景小人的小 map 并将其移动到街景中，效果很好。

但是，当您单击街景 View 上的关闭按钮时，小 map 和街景 View 会正常关闭，但街景小人不会返回到其默认位置。它保留在 map 上，不能重新丢弃。

我想在街景关闭时将街景小人移回默认位置，如果您再次将其放在 map 上以像第一次一样加载街景。

在线代码 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's 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's 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's 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's 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);

Answer 1

不完全确定为什么当前代码不起作用，但我对您在当前代码中采用的方法也有点怀疑。为什么不为全景图(街景)制作一个单独的 div 并对 map_canvas div 做一些样式以复制您当前的方法(而不是使用小 map 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>

首先，在标记中，我们要为 map 声明一个 div，为全景图声明一个 div，这将绑定(bind)到 map 。我们在一个容器中声明它以用于样式目的(当我们想要将 map 重叠在全景图上时)。请注意，全景图的样式最初设置为 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 在 pegman 被放下时重叠在 pano div 上。我将此解决方案中的概念用于 div 重叠 ( How to overlay one div over another div )。 .minimap 和 .bigmap 类可以轻松地将 map_canvas 从一个 View 切换到另一个 View ，这在下面的 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 中初始化了所有 map 内容。这是非常不言自明的，要查看此处设置的属性，请查看 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 display 设置为 none 时，我们可以使用 jquery 来检查可见性。如果它是可见的，这意味着它不是街景小人的初始下降 - 如果它是隐藏的，那么这就是我们将 map_canvas 的类更改为小 map 的地方。另请注意，我们在“visible_changed”监听器中监听 closeclick。这是因为 visible_changed 还包括 closeclick 操作，因此通过将其放入其中，我们将监听器绑定(bind)到另一个。一旦触发 closeclick，我们隐藏 pano div 并将 map_canvas 更改回正常大小。

这种方法的好处是streetView 上的 native “closeclick”操作将街景小人从它设置的 map 中删除并将其恢复正常(这是您在问题中想要的)。此外，要回到原来的位置，您只需执行 map.panTo()在“closeclick”事件监听器到初始位置。

我希望这就是您要找的东西，如果距离太远，我深表歉意!我知道它本质上是要求您重新设计当前的代码结构 - 但只是认为这种方法要简单得多，并且似乎可以做您想做的事情。