1

私の Web アプリケーションでは、Google Maps JavaScript API v3 を使用しています。Web ページで、次のコードを使用して Google マップを作成しています。

 var centerLatLng = new google.maps.LatLng(obj.centerlat, obj.centerlong);
 var myOptions = {
     center: centerLatLng,
     zoom: 17,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     draggable: true
 };

 var map = new google.maps.Map(document.getElementById("map_convas"), myOptions);

 var markerArray = obj.locations;
 var triangleCoords = new Array();

 for(var x=0;x<markerArray.length;x++){
      triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude));
 }

 var polypath = new google.maps.Polyline({
       path: triangleCoords,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
 });

 polypath.setMap(map);

このコードは地図を正しく表示します。次に、そのマップの下にボタンがあります。そのボタンをクリックすると、同じページにある map_convas_1 という div に別の Google JavaScript マップが表示されます。私が書いたこのコードは次のとおりです。

 $('#secondmapbtn').unbind("click");
 $('#secondmapbtn').bind('click', function(){ 


      var centerLatLng2 = new google.maps.LatLng(secondcenterlat, secondcenterlong);
 var myOptions2 = {
     center: centerLatLng2,
     zoom: 17,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     draggable: true
 };
   $('#map_convas_2').show();
 var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);

 var secondMarkerArray = secondobj.locations;

 // putting markers in map 

     for(var i=0;i<markerArray.length;i++){
      var myLatlng = new google.maps.LatLng(secondMarkerArray[i].latitude, secondMarkerArray[i].longitude);

      var marker = new google.maps.Marker({
           clickable: true,
           position: myLatlng,
           map: map2,
           zIndex: i
      });
      marker.setIcon('marker_icon.png');
}
 });

両方のdivのHTMLは

 <div id='map_convas'></div>
 <div id='map_convas_2'></div>

cssは次のとおりです。

 #map_convas{
position: absolute;
    border-radius: 8px;
    width:657px; 
    height:592px;
    top: 50px;
    left: 100px;
 }

 #map_convas_2{
position: absolute;
    border-radius: 8px;
    width:657px; 
    height:592px;
    top: 700px;
    left: 100px;
    display:none;
 }

ボタンをクリックすると、2 番目のマップが表示されますが、正しく表示されません。1 番目と 2 番目のマップがどのように見えるかのスクリーンショットを添付します。最初のマップ インスタンス コードをコメントすると、2 番目のマップは正常に機能します。これは、2 番目のマップ インスタンスを作成するときに問題が発生することを意味します。なぜ2番目のマップがOKではないのか、この問題を解決する方法を知っている人はいますか?

最初のマップ

2 番目のマップ

4

2 に答える 2

1 
<style>
.map img { background-color: transparent; }
#map-canvas { width:400px; height:450px; }
</style>
于 2012-10-12T06:55:23.883 に答える
1

この行の後

var map2 = new google.maps.Map(document.getElementById("map_convas_2"), myOptions2);

追加

 google.maps.event.trigger(map2, 'resize');

 
その新しい行をコードの下に少し移動するか、タイムアウトを設定する必要がある場合があります。問題は、.show()が DOM でマップ サイズをリセットするのに時間がかかり、API がマップをセットアップするときにマップのサイズがまだゼロであると通知されていることです。したがって、最小数のタイルのみを取得して、サイズがゼロのマップを左上隅に表示します。

于 2012-08-08T15:01:53.603 に答える