Google Maps API V3 - benutzerdefinierte Fliesen

Question

Ich arbeite derzeit an Google Maps API V3 über hier

Wenn Sie zwischen 21 und 23 zoomen, gibt es auf der Karte ein Bildüberlagerungen. Das Bild dauert zu lange und ich habe beschlossen, es in verschiedene Kacheln zu zerlegen, um das Laden zu laden. Ich benutze den automatischen Fliesenschneider, um das Bild in Fliesen 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 finden Sie die Werte von x und y aus dem Photoshop -Dokument?

Nehmen Sie an, wenn ich es schaffe, die erste Frage zu lösen.

Zweite Frage Ist der folgende Code korrekt, um die Fliesen je nach Zoomebene anzuzeigen? Oder fehlt mir 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

Anstatt automatische Fliesenschneider zu verwenden, habe ich Maptiler verwendet und empfohlen. Es schneidet das Bild nicht nur in Fliesen und generiert auch ein JavaScript -Kachelskript, um es zu verwenden.

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

V3 Fliesenskript

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