街景视图API 3（添加自定义小地图）关闭按钮街景和Pegman
在我的脚本中，当您将pegman放到地图上时，它会使用自定义小地图加载街景视图。 你可以看到对手的小地图，并将其移动到街景视图，并且工作正常。
但是，当您单击街景视图上的关闭按钮时，小地图和街景视图会很好地关闭，但人员不会返回到其默认位置。 它停留在地图上，不能重新放置。
当街景视图关闭时，我想将人员移回默认位置，并且如果您再次将其放置在地图上，以便像首次加载街景视图一样。
在线代码 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);
不完全确定为什么当前代码无法正常工作，但我也对您在当前代码中采用的方法持怀疑态度。 为什么不为全景（streetview）制作单独的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在pegman被丢弃时在pano div上重叠。 我用这个解决方案的概念为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中我们初始化所有的地图内容。 这是相当自我解释，看看在这里设置的属性看看谷歌地图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()执行初始位置。
我希望你能找到你想要的东西，如果离我的道歉还很远！ 我知道它本质上是要求你重新设计你当前的代码结构 - 但只是认为这种方法简单得多，而且似乎做了你想做的同样的事情。
链接地址: http://www.djcxy.com/p/75861.html上一篇: Street view API 3 (add custom minimap) close button Street view and Pegman