在我的脚本中，当您将街景小人放到地图上时，它会使用自定义小地图加载街景视图。您可以使用街景小人员查看小地图并将其移至街景视图，并且工作正常。
但是，当您单击街景视图上的关闭按钮时，小地图和街景视图会很好，但街景小人不会返回其默认位置。它停留在地图上，不能重新删除。
我想在街景视图关闭时将街景小人移回默认位置，如果您再次将其放在地图上以加载街景视图，那么这就是第一次。
在线代码 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);
答案 0 :(得分：6)
不完全确定为什么当前的代码不起作用，但我对你在当前代码中采用的方法有点怀疑。为什么不为全景（街景）创建一个单独的div，并为map_canvas div做一些样式来复制当前的方法（而不是使用minimap 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可以在pano div上重叠。我使用此解决方案中的概念进行div重叠（How to overlay one div over another 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中我们初始化所有地图内容。这是非常自我解释，看看这里设置的属性看看谷歌地图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显示设置为none时，我们可以使用jquery来检查可见性。如果它是可见的，那意味着它不是pegman的初始下降 - 如果它被隐藏，那么我们将map_canvas的类更改为minimap。另请注意，我们在“visible_changed”侦听器中侦听closeclick。这是因为visible_changed还包括closeclick动作，因此通过将其置于内部，我们将侦听器绑定到另一个。触发closeclick后，我们隐藏pano div并将map_canvas更改回正常大小。
这种方法的好处是，streetView上的原生“closeclick”动作将pegman从它设置的地图中移除并将其恢复正常（这是你想要的问题）。此外，要返回原始位置，您只需在“closeclick”事件监听器上执行map.panTo()到初始位置。
我希望这是你所寻找的，如果它远远不是我的道歉！我知道它本质上是要求你重新设计你当前的代码结构 - 但只是认为这种方法更简单，似乎做了你想做的事情。