Comment puis-je transformer une superposition personnalisée dans Google Maps pour tenir compte de la projection?

Question

Je développe une application qui utilise l'API Google Maps v3. Je veux faire des superpositions personnalisées qui sont des carrés exactement 1000 km de chaque côté (chaque recouvrement est en fait un png transparent 1000x1000, avec chaque pixel représentant 1 km carré). Ma mise en œuvre actuelle est la suivante:

function PngOverlay(map,loc) { 
    this._png = null; 
    this._location = loc; //lat,lng of the square's center 
    this.setMap(map); 
} 

PngOverlay.prototype = new google.maps.OverlayView(); 

PngOverlay.prototype.onAdd = function() { 
    this._png = new Element('image',{ //using mootools 
    'src': pngForLoc(this._location), 
    'styles': { 
     'width': 1000, 
     'height': 1000,   
     'position': 'absolute' 
    } 
}); 

var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(this._png); 
} 

PngOverlay.prototype.onRemove = function() { 
    this._png.parentNode.removeChild(this._png); 
    this._png = null; 
} 

PngOverlay.prototype.draw = function() { 
    var dp = this.getProjection().fromLatLngToDivPixel(this._location);  
    var ps = this._png.getSize(); 

    var t = dp.y - (ps.y/2); 
    this._png.setStyle('top',t); 

    var l = dp.x - (ps.x/2); 
    this._png.setStyle('left',l); 
} 

Ma question est la suivante: que, si quelque chose, est-ce que je dois faire pour tenir compte de la projection de Google Maps? Ma compréhension limitée de Mercator est qu'il préserve la distance horizontale mais pas verticale. Comment puis-je transformer() mon png de manière appropriée pour cela?

Answer 1

Il n'y a pas vraiment assez d'informations, mais vous pourriez trouver la bibliothèque open source proj4js utile car elle peut effectuer diverses transformations de projection, par exemple. Au système de projection Spherical Mercator de Google.