Maps API更改瓷磚尺寸導致錯誤座標

親愛的所有人，請幫助我以下。我在下面找到了一段代碼，併爲我自己的使用添加了一點。現在我輸入以下問題。正如你所看到的，我使用尺寸爲100 x 100 px而不是普通的256 x 256 px瓷磚的瓷磚。Maps API更改瓷磚尺寸導致錯誤座標

地圖本身看起來不錯，但座標有點搞砸了。例如，您可以看到我必須將地圖居中放置lat：73以獲得中心的「赤道」。你也可以看到，如果在y方向上滾動，我構造的三角形不會在地圖上的相同位置重複。你必須在世界各地滾動2.56次才能找到下一個三角形，而不是在精確的1次之後找到它。

現在的問題是，我可以以某種方式修復座標設置嗎？或者我可以以某種方式使用標準化的x和y座標放置我的三角形？

的地圖可以在magtest.r4u.nl

（我知道需要清理一些。註釋的代碼，如「明月」都是原代碼直接拷貝，因爲我發現它在網絡上）

查看

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

來源

2016-01-15 Martin_83

我試圖在代碼中的其他地方放置tilesize語句，但沒有奏效。還有其他建議嗎？ –

搜索了很多後，我找到了以下解決方案。我在下面的代碼中添加了將座標調整爲正確的圖塊大小。

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

多邊形現在僅示出在第一-180到+180度的地圖。當我滾動到右側或左側時，只要我滾動超過180度，地圖就會刷新，從原始地圖中刪除多邊形，並將其替換到現在位於我的視圖中心的地圖上。它對我來說工作得很好，但如果有人知道我能如何解決這個問題，那就太好了。

來源

2016-01-19 07:33:45

Maps API更改瓷磚尺寸導致錯誤座標

回答

相關問題