Question

我有一个页面设置，需要通过API初始化多个Google Maps实例。第一次初始化一个地图时，一切正常。当您单击按钮执行此操作时，地图不会完全显示。

var locations = [

              ['test1', 45.440188, -75.676309, 1, 'transportation.png'],
              ['test2', 45.439463, -75.675751, 1, 'medical.png'],
              ['test3', 45.439792, -75.683544, 1, 'schools.png'],
              ['test4', 45.439652, -75.676929, 1, 'shopping.png']     
      ];

    function initialize_1() {
        var mapOptions = {
          center: new google.maps.LatLng(45.438612, -75.677561),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas_1"), mapOptions);

        marker = new google.maps.Marker({
           position: new google.maps.LatLng(45.438612, -75.677561),
            map: map
        });

        var marker, i;

        var iconBase = 'http://www.elkproperty.com/new/images/icons/';

        for (i = 0; i < locations.length; i++) {  
            marker = new google.maps.Marker({
               position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
               ,icon: iconBase + locations[i][4]
            });

        }

      }

Answer 1

我认为问题在于您正在将地图初始化为隐藏图层。尝试在initialize_1()后调用show()：

onclick="$('#units_1').hide(); $('#unitArrow_1').hide(); $('#amenity_1').show(); $('#amenityArrow_1').show(); initialize_1();"

其他选项是在 div可见后强制调整大小事件。为此，您可能需要将map变量设为全局。

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

可能与您的问题无关，但每次使用地图显示div时，是否必须初始化地图图层？也许您可以测试它是否已初始化，例如：

var isInit_1 = false; function initialize_1() { if (isInit_1) { return; } isInit_1 = true; var mapOptions = { ...

Google Maps API - 第二次初始化时不显示地图

1 个答案: