Question

亲爱的，请帮助我以下。我在下面的代码中找到了一些代码，并为我自己使用了一些代码。现在我输入以下问题。如您所见，我使用尺寸为100 x 100像素的瓷砖而不是普通的256 x 256像素瓷砖。

地图本身看起来不错，但坐标有些混乱。例如，您可以看到我必须将地图居中于lat：73以获得＆＃34;赤道＆＃34;在中心。您还可以看到，如果沿y方向滚动，我构建的三角形不会在地图上的相同位置重复。你必须在世界各地滚动2.56次以找到下一个三角形，而不是在确切的1次之后找到它。

现在的问题是，我能以某种方式修复坐标设置吗？或者我可以以某种方式使用标准化的x和y坐标来放置我的三角形吗？

可以在magtest.r4u.nl

查看地图

（我知道代码需要清理一点。注释如＆＃34; moon＆＃34;是我在网上找到的原始代码的直接副本）

    function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 73, lng: 0},
    zoom: 3,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

 // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 85, lng: 0},
    {lat: 85, lng: 30},
    {lat: 37, lng: 10}
  ];

  var triangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  triangle.setMap(map);

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//magtest.r4u.nl/map/' + zoom + '/' + normalizedCoord.x + '/' + (bound - normalizedCoord.y - 1) + '.png';
    },
    tileSize: new google.maps.Size(100, 100),
    maxZoom: 14,
    minZoom: 3,
    radius: 10000,
    name: 'Moon'
  });

  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};
}

Answer 1

经过大量搜索，我找到了以下解决方案。我在下面添加了代码来调整坐标到右边的瓷砖大小。

＆＃13;

moonMapType.projection = {
    fromLatLngToPoint: function(latLng) {
      var latRadians = latLng.lat() * Math.PI / 180;
      return new google.maps.Point(
         100 * (0.5 + latLng.lng() / 360),
          100 * (0.5 - 0.5 * Math.sin(latRadians)));
    },
    fromPointToLatLng: function(point) {
      var x = point.x / 100;
      var y = Math.max(0, Math.min(1, point.y / 100));

      return new google.maps.LatLng(
          Math.asin(1 - 2 * y) * 180 / Math.PI,
          -180 + 360 * x);
    }

＆＃13;

现在，多边形仅显示在地图的第一个-180到+180度。当我向右或向左滚动时，只要我滚动超过180度，地图就会刷新，从原始地图中删除多边形并将其替换为现在位于我的视口中心的地图。它适用于我，但如果有人知道如何解决它会很好。

Maps API更改了切片大小，导致坐标错误

1 个答案: