Google Maps API v3 ImageMapType [英] Google Maps API v3 ImageMapType
问题描述
以下是Google Maps API v3 ImageMapType示例： https ：//developers.google.com/maps/documentation/javascript/examples/maptype-image
但是，我没有清楚的理解该文件如何瓷砖/缩放工作。现在，我只是试图让它与0缩放工作。一旦我解决了这个问题，我可以计算出缩放片。
我的图像是2000px X 2000px。我已经把它分成了8个瓦片，每个瓦片250px X 250px。8元素。
我期待看到我的所有64个瓷砖从0-0.png加载到7-7.png但是，我看到0-0.png尝试加载9次。我已经创建了这个 http://jsfiddle.net/2N2sy/1/ （代码如下）来模拟我的代码。
帮助解开tile / zoom会很受欢迎！
function getNormalizedCoord（coord，zoom）{
var y = coord.y;
var x = coord.x;
//在一个方向范围内的拼贴范围取决于缩放级别
// 0 = 1拼贴，1 = 2拼贴，2 = 4拼贴，3 = 8拼贴等
var tileRange = 1<<放大;
//不在y轴上重复（垂直）
if（y <0 || y> = tileRange）{
return null;
}
//沿x轴重复
if（x <0 || x> = tileRange）{
x =（x％tileRange + tileRange ）％tileRange;
}
返回{
x：x，
y：y
};
}
var map;
函数initMaps（）{
$ .getScript（http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/ src / infobox.js）。done（function（script，textStatus）{
var customMapTypeOptions = {
getTileUrl：function（coord，zoom）{
var normalizedCoord = getNormalizedCoord （coord，zoom）;
if（！normalizedCoord）{
return null;
}
var bound = Math.pow（2，zoom）;
console。 （'http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x +' - '+（bound - normalizedCoord.y - 1）+'.png'）;
return' http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x +' - '+（bound - normalizedCoord.y - 1）+'.png';
}，
tileSize：new google.maps.Size（250,250），
maxZoom：0，
minZoom：0，
radi我们：1738000，
名称：'自定义地图'
};
var customMapType = new google.maps.ImageMapType（customMapTypeOptions）;
var latlng = new google.maps.LatLng（0，0），//中心点
mapOptions = {
zoom：0，
center：latlng，
draggable：true，
scrollwheel：false，
mapTypeControl：false，
panControl：false，
scaleControl：false，
zoomControl： true，
zoomControlOptions：{
style：google.maps.ZoomControlStyle.LARGE，
position：google.maps.ControlPosition.RIGHT_TOP
}，
streetViewControl：false，
streetViewControlOptions：{
位置：google.maps.ControlPosition.RIGHT_TOP
}，
mapTypeControlOptions：{
mapTypeIds：['custom map']
}
};
map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions）;
map.mapTypes.set（'custom map'，customMapType）;
map.setMapTypeId（'custom map'）;
}）;
$（function（）{
if（window.google&& google.maps）{
// alert（Map script is already （）;
initMaps（）;
} else {
// alert（Lazy loading Google map ...）;
lazyLoadGoogleMap（）;
}
}）;
函数lazyLoadGoogleMap（）{
$ .getScript（http://maps.google.com/maps/api/js?sensor=true&callback=initMaps）
.done（function（script，textStatus）{
// alert（Google map script loaded successfully）;
}）
.fail（function（jqxhr，settings，ex）{
// alert（无法加载Google Map脚本：+ jqxhr）;
}）;
这样做。如果你看看你的 getNormalizedCoord 函数，你会发现你期望 tileRange 为1。对照 tileRange 检查 x 坐标。因为那是1，所有大于或等于1的值将被归一化（只有一个选项低于1，这是零）。
如果遵循逻辑这：
- 将
x设置为1％1（即0） - 将
x设置为0 + 1
- 将
x设置为1％1（再次为0）
所以在您选择的缩放级别下，该函数总是返回0.如果尝试更大的缩放级别，你会注意到它会加载你的其他瓷砖。
你正在做的一个错误（我认为）是，你得到了缩放级别：0是完全缩小的，9是完全放大的。您使用的示例基于一个缩放级别为0的单个概览图像，并且每个步骤中的较小块都进一步放大。因此，您应该预期加载一个图块（0,0）在缩放级别为0.要加载所有64个图块，您需要一个hig她的缩放级别。对同一网址的多次调用只是使用其缓存填充切片的API。如果你看这个例子，它只是在X轴上重复出现相同的图像。
回顾在评论中讨论的内容，使用规范化函数将会加载所有tile的缩放级别是3.现在，tile正在加载，y轴翻转。为了解决这个问题，你必须从（bound - normalizedCoord.y - 1）中更改 getTileUrl 到（normalizedCoord.y - 1）。
放大Google地图的整个想法基于加载图像对于同一个瓦片网格具有更高级别的细节，从而给出进一步放大的想法。为此，您将需要生成额外的图像。
如果您没有/不需要具有额外细节的图像，您可以选择修复缩放级别为3（无论如何都不会注意到），并且按照您的需求进行部署或清理（甚至可以删除）规范化代码。目前该功能负责在X轴上重复相同的图像，而Y轴上则完全不重复。对于X轴上的重复，它会查看缩放级别，以确定应该在装入0之前装入多少个图块。
从问题中，我可以'如果你需要包装或者只是从示例中挑选出来，那么就可以推导出来。我也不知道你是否有更多的图像。因此，我无法向您提供任何随时可用的代码，因为我没有任何规格可供使用。
如果你不需要包装，就像处理Y坐标那样处理X坐标：
函数getNormalizedCoord（coord，zoom）{
var y = coord.y;
var x = coord.x;
//在一个方向范围内的拼贴范围取决于缩放级别
// 0 = 1拼贴，1 = 2拼贴，2 = 4拼贴，3 = 8拼贴等
var tileRange = 1<<放大;
//不在y轴上重复（垂直）
if（y <0 || y> = tileRange）{
return null;
}
//不重复x轴（水平）
if（x <0 || x> = tileRange）{
return空值;
}
返回{
x：x，
y：y
};
$ b （请注意，这两个if语句可以合并为一个，我只是想以便轻松注意哪些更改会影响此行为）
I'm following the Google Maps API v3 ImageMapType example here: https://developers.google.com/maps/documentation/javascript/examples/maptype-image
But, I don't have a clear understanding from the documentation how the tiles/zoom work. For now, I'm just trying to get it to work with 0 zoom. Once I tackle that, then I can figure out the zoom piece.
My image is 2000px X 2000px. I've sliced it up into 8 tiles by 8 tiles at 250px X 250px per tile.
I am doing console.log on getTileUrl. I was expecting to see all 64 of my tiles loaded from 0-0.png to 7-7.png But, I'm seeing 0-0.png attempt to load nine times.
I've created this http://jsfiddle.net/2N2sy/1/ (code below) to simulate my code.
Help unraveling the tiles/zoom would be greatly appreciated!
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
};
}
var map;
function initMaps() {
$.getScript("http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js").done(function (script, textStatus) {
var customMapTypeOptions = {
getTileUrl: function (coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
console.log('http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x + '-' + (bound - normalizedCoord.y - 1) + '.png');
return 'http://img.photobucket.com/albums/v229/s15199d/ + normalizedCoord.x + '-' + (bound - normalizedCoord.y - 1) + '.png';
},
tileSize: new google.maps.Size(250, 250),
maxZoom: 0,
minZoom: 0,
radius: 1738000,
name: 'custom map'
};
var customMapType = new google.maps.ImageMapType(customMapTypeOptions);
var latlng = new google.maps.LatLng(0, 0), // center point
mapOptions = {
zoom: 0,
center: latlng,
draggable: true,
scrollwheel: false,
mapTypeControl: false,
panControl: false,
scaleControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
},
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
mapTypeControlOptions: {
mapTypeIds: ['custom map']
}
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
map.mapTypes.set('custom map', customMapType);
map.setMapTypeId('custom map');
});
}
$(function () {
if (window.google && google.maps) {
//alert("Map script is already loaded. Initializing");
initMaps();
} else {
//alert("Lazy loading Google map...");
lazyLoadGoogleMap();
}
});
function lazyLoadGoogleMap() {
$.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=initMaps")
.done(function (script, textStatus) {
//alert("Google map script loaded successfully");
})
.fail(function (jqxhr, settings, ex) {
//alert("Could not load Google Map script: " + jqxhr);
});
}
解决方案 You're telling it to do so. If you look at your getNormalizedCoord function, you'll see that you're expecting a tileRange of 1. Then you check the x coordinate against the tileRange. Since that is 1, all values above or equal to 1 will be normalized down (only one option below 1, and that's zero).
If you follow the logic it does this:
- Set
x to 1 % 1 (that's 0)
- Set
x to 0 + 1 (that's 1)
- Set
x to 1 % 1 (that's 0 again)
So at the zoom level you chose, the function is rightfully always returning 0. If you try a bigger zoom level, you will notice it does load your other tiles.
One of the mistakes you're making (I think), is that you got the zoom levels backwards: 0 is fully zoomed out and 9 is fully zoomed in. The example you used is based around a single overview image for zoom level 0 and smaller chunks on every step further zoomed in. Therefor you should be expecting one tile (0, 0) being loaded at zoom level 0. To load all of the 64 tiles, you will need a higher zoom level. The multiple calls to the same url is simply the API using its cache to fill in the tiles. If you look at the example, it is just repeating the same image along the X axis there as well.
To recap what is discussed in the comments, the zoom level at which the normalization function used will load all tiles is 3. Right now, the tiles are being loaded with the y axis flipped. To fix this, you will have to change the following line in getTileUrl from (bound - normalizedCoord.y - 1) to (normalizedCoord.y - 1).
The whole idea of zooming in Google Maps is based on loading images with a higher level of detail for the same tile grid, giving the idea of being zoomed in further. To achieve this, you will therefor need to produce extra images.
If you don't have / don't need images with extra detail, you can either opt to fix the zoom level at 3 (nobody will ever notice anyway) and deploy like that or clean up (perhaps even remove) the normalization code to your needs. Currently the function is in charge of repeating the same images across the X axis, while not repeating at all on the Y axis. For the repetition on the X axis it looks at the zoom level to determine how many tiles should be loaded before wrapping around to 0 again.
From the question, I can't deduce if you need the wrapping or just picked that up from the example. Nor can I tell if you have more images or not. Therefor I can't hand you any ready-to-use code, because I don't have any specifications to work with.
If you don't need the wrapping, make it handle the X coordinates like it does the Y coordinates:
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;
}
// don't repeat across x-axis (horizontally)
if (x < 0 || x >= tileRange) {
return null;
}
return {
x: x,
y: y
};
}
(Note that those two if statements can be collapsed into one, I just wanted to keep it easy to notice what changes influence this behavior)
这篇关于Google Maps API v3 ImageMapType的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
