Следвам примера за API на Google Maps v3 ImageMapType тук: https://developers.google.com/maps/documentation/javascript/examples/maptype-image
Но нямам ясно разбиране от документацията как работят плочките/увеличението. Засега просто се опитвам да го накарам да работи с 0 увеличение. След като се справя с това, мога да разбера частта за увеличение.
Изображението ми е 2000px X 2000px. Нарязах го на 8 плочки по 8 плочки по 250px X 250px на плочка.
Правя console.log на getTileUrl. Очаквах да видя всичките си 64 плочки, заредени от 0-0.png до 7-7.png, но виждам, че 0-0.png се опитва да се зареди девет пъти.
Създадох този http://jsfiddle.net/2N2sy/1/ (код по-долу), за симулира моя код.
Помощ за разплитане на плочките/увеличаване ще бъде високо оценена!
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);
});
}
