Google地图平移/缩放无法在IFrame中使用

Question

我在Flex程序中嵌入了一个IFrame，其中包含一个带有一堆javascript代码的google地图（所有代码都可以在这里找到：http://jsfiddle.net/rcucfjux/3）。

当帧加载时，从Flex调用initialize（）函数，地图和地图加载正常。然后用户可以双击地图并绘制一对多边形，以用户点击的点为中心（这一切都正常）。然后我在Flex中有一个调用centerPoly（）函数的按钮。这应该是将多边形置于屏幕中心，但是当调用该函数时，没有任何反应。即使我只使用map.setZoom（10），缩放也不会改变。相关代码如下。

function centerPoly() {
    var bounds = new google.maps.LatLngBounds();
    bounds = polyshapeinzone.getBounds();
//  map.setCenter(bounds.getCenter());
//  map.setOptions(mapOptions);
    map.panTo(bounds.getCenter());


}

// Polygon getBounds extension - google-maps-extensions
// https://github.com/tparkin/Google-Maps-Point-in-Polygon
// http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
if (!google.maps.Polygon.prototype.getBounds) {
  google.maps.Polygon.prototype.getBounds = function(latLng) {
  var bounds = new google.maps.LatLngBounds(),
  paths = this.getPaths(),
  path,
  p, i;

for (p = 0; p < paths.getLength(); p++) {
  path = paths.getAt(p);
  for (i = 0; i < path.getLength(); i++) {
    bounds.extend(path.getAt(i));
  }
}

return bounds;
};
}


function initialize() {

  var markers = [];

  var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(40.489829,-81.482353),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: false,
  zoomControl: true
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 // zoom: 12,
 //  center: new google.maps.LatLng(40.489829,-81.482353),
 //  mapTypeId: google.maps.MapTypeId.ROADMAP,
 //  disableDefaultUI: false,
 //  zoomControl: true
 // });

 map.setCenter(new google.maps.LatLng(40.489829,-81.482353));
 map.setZoom(12);

 var polyOptions = {
      strokeWeight: 0,
      fillOpacity: 0.45,
      editable: true,
      fillColor: 'blue'
    };

// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
  document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();

if (places.length == 0) {
  return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}

// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
  var image = {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  };

  // Create a marker for each place.
  var marker = new google.maps.Marker({
    map: map,
    icon: image,
    title: place.name,
    position: place.geometry.location
  });

  markers.push(marker);

  bounds.extend(place.geometry.location);
}
 map.fitBounds(bounds);
 map.setZoom(10);

});
// [END region_getplaces]

// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});


// Creates a drawing manager attached to the map that allows the user to draw
    // markers, lines, and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: null,
      drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: []
      },
      markerOptions: {
        draggable: true
      },
      polygonOptions: polyOptions,
      map: map
    });



    google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {});

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {

        //overlayClickListener(e.overlay);
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
            // Switch back to non-drawing mode after drawing a shape.
            drawingManager.setDrawingMode(null);

            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;
            newShape.type = e.type;

            google.maps.event.addListener(newShape, 'click', function(e) {
                if (e.vertex !== undefined) {
                    if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
                        var path = newShape.getPaths().getAt(e.path);
                        path.removeAt(e.vertex);
                        if (path.length < 3) {
                            newShape.setMap(null);
                        }
                    } else {
                        setSelection(newShape);
                    }
                } else {
                    setSelection(newShape);
                }


                google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
                    getPolygonPath(newShape);
                });

                google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
                    getPolygonPath(newShape);
                });

                google.maps.event.addListener(newShape.getPath(), 'remove_at', function() {
                    getPolygonPath(newShape);
                });


            });
            setSelection(newShape);


        }
    });

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);  


    google.maps.event.addListener(map, 'dblclick', function (event) {
        map.set('disableDoubleClickZoom', true);

        if (polyshapeinzone != null) {
            if (confirm("You already have a zone defined on the map.  Are you sure you want to clear that zone and place a new one here?")) {
                polyshapeoutzone.setMap(null);
                polyshapeoutzone = null;
                polyshapeinzone.setMap(null);
                polyshapeinzone = null;
            } else {
                return
            }
        } 

        var polyCoords = new Array();
        var latlngObj;

        var offset = 0.005;

        mouseLat = event.latLng.lat();
        mouseLong = event.latLng.lng();

        latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong - offset);
        polyCoords.push(latlngObj);
        latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong + offset);
        polyCoords.push(latlngObj);
        latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong + offset);
        polyCoords.push(latlngObj);
        latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong - offset);
        polyCoords.push(latlngObj);

        var polyshapeinzoneitm = new google.maps.Polygon({
            paths: polyCoords,
            editable: false,
            strokeColor: incolor,
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: incolor,
            fillOpacity: 0.35,
            zIndex: 9999,
            polyLat: mouseLat,
            polyLng: mouseLong
        });

        polyshapeinzoneitm.setMap(map);
        polyshapeinzone = polyshapeinzoneitm;
        addListenersOnPolygon(polyshapeinzone);


    // Set the outside boundary

    polyCoords = [];
    offset = 0.01;

    latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong - offset);
    polyCoords.push(latlngObj);
    latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong + offset);
    polyCoords.push(latlngObj);
    latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong + offset);
    polyCoords.push(latlngObj);
    latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong - offset);
    polyCoords.push(latlngObj);

        var polyshapeoutzoneitm = new google.maps.Polygon({
            paths: polyCoords,
            editable: false,
            strokeColor: outcolor,
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: outcolor,
            fillOpacity: 0.35
        });

        polyshapeoutzoneitm.setMap(map);
        polyshapeoutzone = polyshapeoutzoneitm;
        addListenersOnPolygon(polyshapeoutzone);

    });   

}

google.maps.event.addDomListener(window, 'load', initialize);