API の v.3 を使用して、Google マップにカスタム タイルを重ねようとしています。https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypesにある Google の例に基づいて作業を行いました。
基本的な機能は機能しており、タイルが表示されていますが、タイルの位置が少しずれており、ズーム レベルを徐々に変更するとさらに位置がずれます。
たとえば、マップはズーム 15 でロードされます。1 ストップをレベル 16 にズームインすると、タイルが示す内容に従って、マップが不適切に再センタリングされます。マップは実際には (カスタム マーカーで示されるように) 適切に中央に配置されていますが、新しいズーム レベルで適切なタイル セットが描画されていた場合、新しいズーム レベルで描画されるタイルはマップの中心から左下にあるはずです。
何が原因で、どうすれば修正できますか?
タイルの生成が不十分ですか? マップの境界を指定する必要がありますか?
私たちの地図ページ: http://www.cornell.edu/maps2/
少し調整した Google の例のコード (Google の例のように "bound" 変数を使用すると、ファイル名が一致しないため、タイルは読み込まれません):
var customTypeOptions = {
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
//var imageURL = "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" + "/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg";
var imageURL = "http://www.cornell.edu/maps/tiles/x" + (normalizedCoord.x + 1) + "y" + (normalizedCoord.y - 1) + "z" + zoom + ".gif";
return imageURL;
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 18,
minZoom: 13,
name: "Custom"
};
var customMapType = new google.maps.ImageMapType(customTypeOptions);
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;
}
//console.debug(coord.x, coord.y, tileRange, zoom, x, y);
return {
x: x,
y: y
};
}