Question

我对javascript和google API一般都是全新的。我想使用谷歌地图方法在网页上显示组成IL2 Cliffs of Dover游戏地图的图块。这很复杂，因为坐标系不一样，事实上图像看起来是颠倒的，但我稍后会再说。

我在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>

据我通过firebug从调试控制台日志中看到，变量normalizedCoord.x被设置为1或0。

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

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

我现在不知道该怎么做，因为我不熟悉JS，所以我看不出有什么问题。理想情况下，我根本不需要对图像进行医生处理，这些图像是TGA文件，正如我所说的那样编号不同于谷歌示例和颠倒（没有旋转，虽然奇怪！）

Answer 1

首先，我认为你不能将瓷砖尺寸改为190 * 190。 256 * 256是Google的基本地图画布上的网格。其次，您的图像将根据缩放级别进行平移。注意这个评论：

//一个方向范围内的切片范围取决于缩放级别 // 0 = 1个瓷砖，1 = 2个瓷砖，2 = 4个瓷砖，3 = 8个瓷砖等

您提到您希望稍后处理缩放级别，但您的切片将根据您提供的缩放级别加载。例如：在缩放级别0 - 1平铺;用于缩放级别1 - 2个瓷砖等等。

最后，当您进行硬编码并获得两行时，其中一行被裁剪为124像素（来自所有边缘或其中一组）？因为我认为自从你硬编码以来它正在发生的事情正在被加载但它被分割在基本的网格上以适应。

希望这会有所帮助。

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

Google会映射自定义磁贴设置和不显示图像

1 个答案: