谷歌地图自定义磁贴设置和不显示图像

Google maps custom tiles set up and non-displaying of images

本文关键字：显示 显示图 图像 设置 自定义 谷歌地图      更新时间：2023-09-26

我对javascript和Google API完全陌生。我想使用谷歌地图方法在网页上显示构成 IL2 多佛悬崖游戏地图的瓷砖。这很复杂，因为坐标系不一样，事实上图像似乎是颠倒的，但我稍后会谈到这一点。

我在这里看到了这个例子 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文件，并且正如我所说，编号与谷歌示例不同，并且颠倒（没有旋转，尽管这很奇怪！

首先，我认为您不能将磁贴大小更改为 190*190。 256*256是谷歌基本地图画布上的网格。其次，您的图像将相对于缩放级别平移。注意这条评论：

单向磁贴范围取决于缩放级别 0 = 1 个图块，1 = 2 个图块，2 = 4 个图块，3 = 8 个图块，依此类推

您

提到稍后要处理缩放级别，但磁贴将根据您提供的缩放级别进行加载。例如：在缩放级别 0 - 1 磁贴;对于缩放级别 1 - 2 磁贴等。

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

希望这有帮助。

PS：这是一篇应该有助于澄清整个概念的文章。

相关文章：