我正在开发一个使用 Google Maps API v3 的应用程序。我想制作每边正好是 1000 公里的正方形的自定义叠加层(每个叠加层实际上是一个 1000x1000 的透明 png,每个像素代表 1 平方公里)。我目前的实现是这样的:
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);
}
我的问题是:如果有的话,我需要做什么来说明谷歌地图的投影?我对墨卡托的有限理解是它保留了水平距离而不是垂直距离。我怎样才能适当地转换()我的 png 来解决这个问题?