带有自定义图像的脱机映射：如何将图像居中并使其填满屏幕

Question

我想制作一个可以全屏平移和缩放图像的应用程序。 标记将显示有关图像那部分的信息。 这很像一张地图。 因此，我开始使用Phonegap和OpenLayers离线映射。 现在我已经成功实现了这一点，但是我似乎并没有抓住坐标系。 当我在Android上运行应用程序时，它会显示黑屏，直到我触摸缩放控件。 然后一下子就可以看到该图像了，您可以将其拖动并浏览。 我认为这与坐标系有关。

这是我的init函数，基本上可以显示地图并使其正常工作：我正在寻找一种方法来使我的图像居中并在运行此应用时使其充满整个屏幕。

var init = function () {
// create map
map = new OpenLayers.Map({
    div: "map",
    theme: null,

    // komt van http://trac.osgeo.org/openlayers/wiki/UsingCustomTiles
    maxExtent: new OpenLayers.Bounds(  0.0, -3433.0, 3433.0, 0.0 ),
    maxResolution: 16.000000,
    numZoomLevels: 7,
    // end

    controls: [
        new OpenLayers.Control.Attribution(),
        new OpenLayers.Control.TouchNavigation({
            dragPanOptions: {
                enableKinetic: true
            }
        }),
        new OpenLayers.Control.Zoom()
    ],
    layers: [
        new OpenLayers.Layer.TMS( "TMS Layer","",
                {  url: '', serviceVersion: '.', layername: '.', alpha: false,
                    type: 'jpg', getURL: overlay_getTileURL,
                    transitionEffect: 'resize'
                })
    ],
    center: new OpenLayers.LonLat(1000, 1000),
    zoom: 3
});
};

Answer 1

这是一个非常常见的问题-您需要map.zoomToMaxExtent(); 在您的init函数末尾。