Question

我在这里关注Google Maps API v3 ImageMapType示例：https://developers.google.com/maps/documentation/javascript/examples/maptype-image

但是，我没有从文档中清楚地了解tile / zoom的工作原理。现在，我只是想让它与0变焦一起工作。一旦我解决了这个问题，那么我就可以找出变焦片。

我的图片是2000px X 2000px。我把它切成8块瓷砖，每块瓷砖250px X 250px，8块瓷砖。

我在getTileUrl上做console.log。我期待看到我的所有64块瓷砖从0-0.png加载到7-7.png但是，我看到0-0.png尝试加载9次。

我已经创建了这个http://jsfiddle.net/2N2sy/1/（下面的代码）来模拟我的代码。

帮助解开瓷砖/缩放将非常感激！

function getNormalizedCoord(coord, zoom) {
    var y = coord.y;
    var x = coord.x;

    // tile range in one direction range is dependent on zoom level
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
    var tileRange = 1 << zoom;

    // don't repeat across y-axis (vertically)
    if (y < 0 || y >= tileRange) {
        return null;
    }

    // repeat across x-axis
    if (x < 0 || x >= tileRange) {
        x = (x % tileRange + tileRange) % tileRange;
    }

    return {
        x: x,
        y: y
    };
}

var map;

function initMaps() {

    $.getScript("http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js").done(function (script, textStatus) {

        var customMapTypeOptions = {
            getTileUrl: function (coord, zoom) {
                var normalizedCoord = getNormalizedCoord(coord, zoom);
                if (!normalizedCoord) {
                    return null;
                }
                var bound = Math.pow(2, zoom);
                console.log('http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x + '-' + (bound - normalizedCoord.y - 1) + '.png');
                return 'http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x + '-' + (bound - normalizedCoord.y - 1) + '.png';
            },
            tileSize: new google.maps.Size(250, 250),
            maxZoom: 0,
            minZoom: 0,
            radius: 1738000,
            name: 'custom map'
        };

        var customMapType = new google.maps.ImageMapType(customMapTypeOptions);

        var latlng = new google.maps.LatLng(0, 0), // center point

        mapOptions = {
            zoom: 0,
            center: latlng,
            draggable: true,
            scrollwheel: false,
            mapTypeControl: false,
            panControl: false,
            scaleControl: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            streetViewControl: false,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },        
            mapTypeControlOptions: {
                mapTypeIds: ['custom map']
            }
        };

        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        map.mapTypes.set('custom map', customMapType);
        map.setMapTypeId('custom map');

    });
}

$(function () {
    if (window.google && google.maps) {
        //alert("Map script is already loaded. Initializing");
        initMaps();
    } else {
        //alert("Lazy loading Google map...");
        lazyLoadGoogleMap();
    }

});

function lazyLoadGoogleMap() {
    $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=initMaps")
    .done(function (script, textStatus) {
        //alert("Google map script loaded successfully");
    })
    .fail(function (jqxhr, settings, ex) {
        //alert("Could not load Google Map script: " + jqxhr);
    });
}

Answer 1

你告诉它这样做。如果您查看getNormalizedCoord功能，则会发现您预计tileRange为1.然后您检查x坐标与tileRange坐标}。由于这是1，所有大于或等于1的值都将被标准化（只有一个选项低于1，并且该值为零）。

如果您按照逻辑执行此操作：

将x设置为1 % 1（即“0”）
将x设为0 + 1（即＆＃39; s）
将x设为1 % 1（再次为0）

因此，在您选择的缩放级别，该功能始终返回0.如果您尝试更大的缩放级别，您会注意到它确实加载了其他图块。

您正在制作的错误之一（我认为）是您向后缩放了水平：0完全缩小，9完全放大。您使用的示例基于单个概览图像对于缩放级别0和每个步骤上的较小块进一步放大。因此，您应该期望在缩放级别0加载一个图块（0,0）。要加载所有64个图块，您将需要更高的缩放级别。对同一网址的多次调用只是使用其缓存来填充图块的API。如果你看一下这个例子，它也只是沿着X轴重复相同的图像。

为了回顾一下评论中讨论的内容，使用归一化函数加载所有切片的缩放级别为3.现在，切换的切片正在加载切片。要解决此问题，您必须将getTileUrl中的以下行从(bound - normalizedCoord.y - 1)更改为(normalizedCoord.y - 1)。

放大Google地图的整个想法是基于为同一个平铺网格加载具有更高细节级别的图像，从而提供了进一步放大的想法。为此，您需要生成额外的图像。

如果您不需要/不需要额外细节的图像，您可以选择将缩放级别修复为3（无论如何都不会注意到）并进行部署或清理（也许甚至删除）符合您需求的规范化代码。目前，该功能负责在X轴上重复相同的图像，而在Y轴上不重复。对于X轴上的重复，它会查看缩放级别，以确定在再次回到0之前应加载多少个图块。

从这个问题来看，如果你需要包装或者只是从示例中挑选出来，我无法推断。我也无法判断你是否有更多的图像。因此，我无法向您提供任何现成的代码，因为我没有任何规范可以使用。

如果你不需要包装，那就让它像处理Y坐标一样处理X坐标：

function getNormalizedCoord(coord, zoom) {
    var y = coord.y;
    var x = coord.x;

    // tile range in one direction range is dependent on zoom level
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
    var tileRange = 1 << zoom;

    // don't repeat across y-axis (vertically)
    if (y < 0 || y >= tileRange) {
        return null;
    }

    // don't repeat across x-axis (horizontally)
    if (x < 0 || x >= tileRange) {
        return null;
    }

    return {
        x: x,
        y: y
    };
}

（请注意，这两个if语句可以合并为一个，我只是想让您轻松注意哪些更改会影响此行为）

Answer 2

您似乎遇到了缩放级别问题。通过将customMapTypeOptions对象中的minZoom和maxZoom更改为＆＃39; 0＆＃39;和＆＃39; 2＆＃39;分别将开始变焦设置为＆＃39; 1＆＃39;在mapOptions对象中，应用程序称为图像＆＃39; 0-1＆＃39;，＆＃39; 0-0＆＃39;，＆＃39; 1-1＆＃39;和＆＃39; 1-0＆＃39;在负载。

在我调查了您列出的Google示例后，我注意到当您为其地图图块添加网址时，会在网址中包含缩放级别。以下是在缩放级别为0时调用的一个图块的示例：

http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/0/0/0.jpg

注意最后三个数字，＆＃34; ... / 0/0 / 0.jpg＆＃34;。放大到缩放级别1后，调用的前两个地图图块包含网址：

http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/1/0/1.jpg {
{3}}

注意最后三个数字是如何变化的。我相信第一个数字是图像应该显示的缩放级别，然后是x＆amp; y图像在地图图块网格中的位置。

根据示例代码中的注释：

// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;

您将使用单个图像文件进行缩放级别0（这是0-0是您加载的唯一图像的原因），2个图像用于缩放级别1，4个图像用于缩放级别2，依此类推。

Google Maps API v3 ImageMapType

2 个答案: