Question

我正在尝试修改用户点击标记时嵌入Google地图的页面（调整地图大小并显示有关标记的信息）。我想我可以做这样的事情作为调整地图大小的例子：

google.maps.event.addListener(marker, 'click', function () {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
    $('#MapContainer').switchClass("MapContainer", "MapContainerSmall");
    $('#MapCanvas').switchClass("MapCanvas", "MapCanvasSmall");
    google.maps.event.trigger(map, 'resize')
});

但是jQuery不会执行/更改类。我假设这是因为我不能将jQuery代码放在Google maps API事件中？

我意识到我必须在这里能够做到的事情上缺乏理解 - 有人能把我推向正确的方向吗？

编辑：

小提琴示例：http://jsfiddle.net/43XbM/

Answer 1

在触发调整大小事件并设置新的中心和缩放之前，您需要等待div开关完成（＆＃34;在switchClass函数中完成＆＃34;选项）。

var map;
var site1 = new google.maps.LatLng(67.62, -134.13);


    var latlng = new google.maps.LatLng(64, -117);
    var settings = {
        zoom: 4,
        maxZoom: 10,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("MapCanvas"), settings);
    var marker = new google.maps.Marker({
        position: site1,
        map: map,
        title: "Hello World!"
    });

    google.maps.event.addListener(marker, 'click', function () {

        $('#MapContainer').switchClass("MapContainer", "MapContainerSmall");
        $('#MapCanvas').switchClass("MapCanvas", "MapCanvasSmall", null, null,
          function() {
          google.maps.event.trigger(map, 'resize')
          map.setZoom(8);
          map.setCenter(marker.getPosition());
        });

    });

Working fiddle

从Google地图标记点击事件修改页面

1 个答案: