Gus*_*avo 3 google-maps google-maps-api-3 google-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'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);
不完全确定为什么当前代码不起作用,但我对你在当前代码中采用的方法有点怀疑.为什么不为全景(街景)创建一个单独的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;
}
这里的样式基本上设置为使得当pegman被丢弃时map_canvas div可以在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从它设置的地图中移除并将其恢复正常(这是你在问题中想要的).此外,要返回原始位置,您只需map.panTo()在"closeclick"事件监听器上执行初始位置即可.
我希望这是你所寻找的,如果它远远不是我的道歉!我知道它实质上是要求你重新设计你当前的代码结构 - 但只是认为这种方法更简单,似乎做了你想做的同样的事情.
| 归档时间： |
|
| 查看次数： |
5752 次 |
| 最近记录： |