English 中文(简体)
街道视图 API 3( 添加自定义缩微图) 关闭按键街视图和佩格曼
原标题:Street view API 3 (add custom minimap) close button Street view and Pegman

在我脚本中,当你把小木偶丢到地图上时, 它会用自定义的小马图装入街道视图。 您可以看到小马图和小马图, 然后移动到小马图上, 然后它就可以正常工作了 。

然而,当您单击街道视图上的关闭按钮时, 迷你图和街景视图接近完美, 但贝曼没有返回到其默认位置。 它会留在地图上, 不能被重新删除 。

我想在Street View 关闭时将egman 移动到默认位置, 如果您在地图上再次丢下它, 以便像第一次一样装入 Street View 。

http://jsbin.com/ayejim/edit#preview" rel=“nofollow” >http://jsbin.com/ayejim/edit#preview

这是我的函数 初始化 :

    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, 并对地图_ canvas div 进行一些格式化, 复制您当前的方法( 而不是使用 minipmap div) 。 我为这个jsfidle (< a href=' http://jsfiddle. net/ svigna/ FnrbX/embed/legard/" rel= nofol=nreferrer> http://jsfidal. net/nrefolvedd/ FnrbX/ a >, 您可以检查并可能使用您的源代码基础 。

请允许我给你们讲讲我的代码 稍微查看一下街上View类的属性 和杂音 我肯定你的问题可以解决

<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,为全景宣布一个div,它将与地图捆绑在一起。我们用一个容器宣布它,用于打字(当我们希望在全景上重叠地图时)。注意全景的风格最初设置为display:noone ,否则你会看到一个灰色的区域(因为没有定位数据,所以没有定位数据 pegman) 。

#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;
} 

这里的样式基本上是为了让地图_canvas div 能够在 pano div 被丢弃时重叠于 pano div 上。 我用这个解决方案的概念来替换 div 重叠( < a href="https://stackoverflow.com/ questions/2941/189/how-to-overlay-one- div-over-another- div > ), 如何将一个 div 覆盖到另一个 div < / a > 上 。.minimmap 和. bigmap 类使得将地图_ canvas 从一个角度切换到另一个角度比较容易, 这将在下面的 javascrip 一节中更有意义 。

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);

我们初始化了所有地图内容, 它非常自我解释, 调查这里所设置的属性, 请查看 Google 地图 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 );        
    });
  });        
}

注意 : 事件听众仍然在初始化() 函数中被宣布 。 但是基本上我们听的是全景可见度的变化, 但仅此一项不足以确定 pano div 元素中是否有实际数据 。 记住当我们设置 pano div 显示为零时, 我们可以使用jquery 检查可见度 。 如果它可见, 意指它不是 pegman 的初始降幅 - 如果它隐藏的话, 那么它就不是 pegman 的初始降幅 - 如果它隐藏起来的话, 那么它就不是 pegman 的初始降幅 - 。 还要注意, 我们在“ 可见_ changed ” 倾听器中收听近击 。 这是因为 可见_ changed 也包括了近击动作, 所以通过把它放进去, 我们再将收听器绑到另一个 。 一旦点击启动, 我们隐藏 pano div, 然后将地图_ canvas 修改为正常大小 。

此方法的伟大之处在于 StreetView 上的本地“ 关闭点击” 动作, 从它设定的地图上除去标签, 并返回到正常状态( 这是您在问题中想要的 ) 。 另外, 要返回到您原来的位置, 您可以在“ 关闭点击” 活动收听器上只做一个“ 关闭” 活动收听器上的 < code> map. panTo ()

我希望这是你所寻求的, 如果离我太远的话,那么我道歉! 我知道这实质上是要求你重新设计你目前的代码结构, 但只是觉得这个方法简单得多, 似乎做了你想做的同样的事情。

问题回答

暂无回答




相关问题
How to decide the current point reach on google map?

How to decide the current point reach on google map? I have a list of points (pickup points) of a route that I want to show in my google map with polyline. Now i have to get the current location of ...

Topographical or relief data in Map APIs

I was wondering if anyone knew of any map APIs that offer topographical or relief data? I ve had a quick look at Google and Bing APIs, but could find nothing there. Google allow you to view a map as ...

Using maps on Windows Mobile

I m experimenting with maps on different mobile platforms. Getting Google Maps to work on Android was easy, following this tutorial. Getting the same to work on Windows Mobile is a different matter. ...

Adding a custom icon to a google map

I need a hand adding a custom icon to some Google Maps javascript. Code below for your reference: function populateMap() { var map = new GMap2(document.getElementById("map")); map.setCenter(new ...

RSS to KML Overlay

I m want to display my blog as a Google Map overlay (each post contains geotags). How can I dynamically create a KML overlay from an RSS? Or better, how can I create a loop (PHP) that would display ...

开放街道地图管理员

我需要开放Street的标记管理员。 地图,如山角地图。

热门标签