Google Maps API V3 - Benutzerdefinierte Fliesen

Question

Zur Zeit arbeite ich auf Google Maps API V3 über here

Wenn Sie zoomen zwischen 21 bis 23, es wird ein Bild-Overlay auf der Karte sein. Das Laden des Bildes dauert zu lange und ich habe beschlossen, es in verschiedene Kacheln zu zerlegen, um das Laden zu erleichtern. Ich verwende den automatischen Kachelschneider, um das Bild in Kacheln zu schneiden.

Ich habe Probleme mit dem Skript;

var OrgX = 31551; // the Google Maps X value of the tile at the top left corner of your Photoshop document 
    var OrgY = 50899; // the Google Maps Y value of the tile at the top left corner of your Photoshop document 

Erste Frage Wie Sie die Werte von X und Y aus dem Photoshop-Dokument finden Sie?

Lassen Sie mich sagen, wenn es mir gelingt, die erste Frage zu lösen.

Zweite Frage Ist der folgende Code korrekt, um die Kacheln abhängig von der Zoomstufe anzuzeigen? Oder fehlen mir irgendwelche Codes?

var BuildingsLayer = new google.maps.ImageMapType({ 
    getTileUrl: function(coord, zoom) { 
     return "http://search.missouristate.edu/map/tilesets/baselayer/" + zoom + "_" + coord.x + "_" + coord.y + ".png"; 
    }, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
}); 

map.overlayMapTypes.push(BuildingsLayer); 

Answer 1

Statt Automatische Fliesenschneider verwenden, habe ich und MapTiler empfohlen. Nicht nur es schneidet das Bild in Kacheln und es generiert auch ein JavaScript-Kacheln-Skript, um es zu verwenden.

Das Skript ist jedoch in v2 geschrieben. Sie können die Codes entsprechend bearbeiten:

v3 Fliesen Skript

var maptiler = new google.maps.ImageMapType({ 
    getTileUrl: function(coord, zoom) { 
return zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; 
}, 
    tileSize: new google.maps.Size(256, 256), 
    isPng: true 
}); 

var map; 

function initialize() { 
map = new google.maps.Map(document.getElementById("map_canvas")); 
map.setCenter(new google.maps.LatLng(36.07, -112.19)); 
map.setZoom(11); 
map.setMapTypeId('satellite'); 
map.overlayMapTypes.insertAt(0, maptiler); 
} 

Credits