4

私のスクリプトでは、ペグマンをマップにドロップすると、ストリート ビューにカスタム ミニマップが読み込まれます。ペグマンでミニマップを表示し、ストリート ビュー用に移動できます。問題なく動作します。

ただし、ストリート ビューの閉じるボタンをクリックすると、ミニマップとストリート ビューは正常に閉じますが、ペグマンはデフォルトの位置に戻りません。マップ上に残り、再ドロップすることはできません。

ストリート ビューを閉じたときにペグマンをデフォルトの位置に戻し、もう一度マップにドロップすると、最初のようにストリート ビューが読み込まれます。

オンライン コード 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);
4

1 に答える 1

6

現在のコードが機能しない理由は完全にはわかりませんが、現在のコードで採用しているアプローチにも少し懐疑的です。パノラマ (ストリートビュー) 用に別の div を作成し、(ミニマップ div を使用する代わりに) 現在の方法を複製するために map_canvas 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 オーバーラップに使用しました ( 1 つの 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 のこの時点までに、すべてのマップ コンテンツを初期化します。ここで設定されているプロパティを調べるのは自明ですが、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 要素に実際のデータがあるかどうかを判断するには不十分です。パノラマ div 表示を none に設定したとき、jquery を使用して可視性を確認できることを思い出してください。表示されている場合は、ペグマンの最初のドロップではないことを意味します。非表示の場合は、map_canvas のクラスをミニマップに変更します。また、「visible_changed」リスナーで closeclick をリッスンしていることにも注意してください。これは、visible_changed にも closeclick アクションが含まれているためです。これを内部に配置することで、リスナーを他のリスナーにバインドします。closeclick がトリガーされたら、pano div を非表示にして、map_canvas を通常のサイズに戻します。

このアプローチの優れた点は、streetView のネイティブの「closeclick」アクションが、設定されているマップからペグマンを削除し、通常の状態に戻すことです (これは、問題で望んでいたことです)。また、元の位置に戻るにはmap.panTo()、「closeclick」イベントリスナーで最初の位置に移動するだけです。

これがあなたが探していたものであることを願っています。基本的に、現在のコード構造を再設計するように求めていることは知っていますが、このアプローチははるかに簡単で、やりたいことと同じように見えると思いました.

于 2012-06-03T04:08:47.567 に答える