0

我在我的网络应用程序中使用 google maps javascript api 来显示地图。以下是显示地图的代码：

 var map;
 var jsMap;

 $(function() {

      // doing stuff here 

      // showing map
      $('#map_div_1').append('<div id="map_1" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');
      var centerLatLng = new google.maps.LatLng(centerlat, centerlong);
      var myOptions = {
            center: centerLatLng,
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable: true
        };

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

          // markerArray is initialized with values in beginning            
             var triangleCoords = new Array();

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

            jsMap = new google.maps.Polygon({
                paths: triangleCoords,
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.35
            });

            jsMap.setMap(map);

      // if this button will be clicked then i want to make another javascript google map in another div map_2
      $('#show_2nd_map').unbind("click");
      $('#show_2nd_map').bind('click', function(){
                // doing stuff
                  jsMap.setMap(null);
              jsMap = null;
              map = null;
               // showing 2nd map

               $('#map_div_2').append('<div id="map_2" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>');

            var centerLatLng1 = new google.maps.LatLng(centerlat2, centerlong2);

            var myOptions = {
            center: centerLatLng1,
            zoom: 17,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable: true
        };

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

         var triangleCoords2 = new Array();

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

         jsMap = new google.maps.Polygon({
            paths: triangleCoords2,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
         });

      jsMap.setMap(map);

      });
   });

第一张地图创建得很好。但是，当我单击 show_2nd_map 按钮时，会创建地图，但无法正确显示。我附上两个屏幕截图。

第一张地图是这样的，没错

第二张图是这样的，错了

4

1 回答 1

0

谷歌根据地图画布元素计算地图的大小，因此它需要在地图初始化之前画布（div）是可见的。有两个走动：

  1. 不要隐藏你的画布，只需将它们放在其他地方（绝对位置和左侧：-99999，顶部：-99999）。

  2. 重新计算地图的宽度和高度google.maps.event.trigger(map, "resize");

于 2012-07-30T15:29:42.017 回答