谷歌地图自定义瓷砖设置和不显示图像

问题描述：

我完全不熟悉JavaScript和谷歌API的一般。我想使用谷歌地图方法，在网页上显示组成多佛尔IL2 Cliffs游戏地图的地图。这是很复杂的，因为坐标系不一样，实际上图像看起来是倒过来的，但我会在稍后讨论。谷歌地图自定义瓷砖设置和不显示图像

我见过这里的例子https://developers.google.com/maps/documentation/javascript/examples/maptype-image

进出复制的代码放到一个新的文件。然后我改变了代码以下，在更改路径和平铺尺寸（190不256）

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Image map types</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 

var moonTypeOptions = { 
    getTileUrl: function(coord, zoom) { 
     var normalizedCoord = getNormalizedCoord(coord, zoom); 
     if (!normalizedCoord) { 
     return null; 
     } 
     var bound = Math.pow(2, zoom); 

if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production 
      console.log(normalizedCoord.x); 
     } 
     return 'http://stormofwar.org/images/m4_' + normalizedCoord.x + '-0.jpg'; 
     // return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' + 
      // '/' + zoom + '/' + normalizedCoord.x + '/' + 
      // (bound - normalizedCoord.y - 1) + '.jpg'; 
    }, 
    tileSize: new google.maps.Size(190, 190), 
    maxZoom: 4, 
    minZoom: 0, 
    radius: 190, 
    name: 'Moon' 
}; 

var moonMapType = new google.maps.ImageMapType(moonTypeOptions); 

function initialize() { 
    var myLatlng = new google.maps.LatLng(0, 0); 
    var mapOptions = { 
    center: myLatlng, 
    zoom: 1, 
    streetViewControl: false, 
    mapTypeControlOptions: { 
     mapTypeIds: ['moon'] 
    } 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 
    map.mapTypes.set('moon', moonMapType); 
    map.setMapTypeId('moon'); 
} 

// Normalizes the coords that tiles repeat across the x axis (horizontally) 
// like the standard Google map tiles. 
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 
    }; 
} 

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

     </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

据我可以从经由萤火调试控制台日志中看到，可变normalizedCoord.x是被设置为1或0.

我已经将tile文件名的格式更改为m4_x-y。

如果我将文件硬编码为一个特定的例子，比如说m4_0-0.jpg，它会显示（多次跨越 - 当然是因为它是硬编码的，但由于某种原因看起来2行）？但是，如果我让它做它自己的事情，我绝对没有形象。我至少想过我会在某个地方看到一张图片？

我不知道现在要做什么，我不明白什么是错的，因为我只是不熟悉JS。理想情况下，我宁愿不必医生的图像，所有这些都是TGA文件，正如我所说的不同，谷歌的例子和颠倒（虽然没有旋转，这是奇怪的！）

我应该指出，在这个阶段我不关心缩放。我只是试图获得单一级别的缩放细节来显示。缩放可能会很快！ :) – GavinP 2014-11-24 13:50:50

答

首先，我不要以为你可以改变平铺尺寸190 * 190。在Google的基本地图画布上，256 * 256是网格。其次，您的图片将根据您的缩放级别进行平移。注意此评论：

//瓦范围在一个方向上的范围是依赖于缩放级别 // 0 = 1瓦，1 = 2瓦，2 = 4瓦，3 = 8砖等

您提到您稍后需要关注缩放级别，但您的图块会根据您提供的缩放级别加载。例如：在缩放级别0 - 1瓦片;对于缩放级别1 - 2平铺等等。

最后，当你硬编码，你会得到两行是124个像素裁剪行之一（无论是从所有的边缘或其中一组）？因为我认为发生了什么事情，因为你已经加载了硬编码，但它被分割到基本网格上以适应。

希望这会有所帮助。

PS：这里有一个article应该有助于澄清整体概念。

谷歌地图自定义瓷砖设置和不显示图像

相关推荐