如何在Google Maps API V3中調用fromLatLngToDivPixel？

Question

我知道該方法存在並且有記錄，但我不知道如何獲取MapCanvasProjection對象。

Answer 1

看http://qfox.nl/notes/116

var overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap(map); 
var point = overlay.getProjection().fromLatLngToDivPixel(latLng); 

醜確實如此。在v2中更容易 - 谷歌api v3的另一個缺陷！

Answer 2

爲了讓您能夠從OverlayView派生類MapCanvasProjection和調用，它返回一個MapCanvasProjection型

使用onAdd（）的getProjection（）方法，畫（）和onRemove（）必須實現從OverlayView的派生。

function MyOverlay(options) { 
    this.setValues(options); 

    var div = this.div_= document.createElement('div'); 

    div.className = "overlay"; 
}; 

// MyOverlay is derived from google.maps.OverlayView 
MyOverlay.prototype = new google.maps.OverlayView; 

MyOverlay.prototype.onAdd = function() { 

    var pane = this.getPanes().overlayLayer; 
    pane.appendChild(this.div_); 

} 

MyOverlay.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
} 

MyOverlay.prototype.draw = function() { 
    var projection = this.getProjection(); 
    var position = projection.fromLatLngToDivPixel(this.getMap().getCenter()); 

    var div = this.div_; 
    div.style.left = position.x + 'px'; 
    div.style.top = position.y + 'px'; 
    div.style.display = 'block'; 
}; 

那麼當你創建地圖

var OverLayMap = new MyOverlay({ map: map }); 

對於V2 你應該能夠從您的GMap2實例調用fromLatLngToDivPixel

var centerPoint = map.fromLatLngToDivPixel(map.getCenter()); 

Answer 3

var map; 
// Create your map 
MyOverlay.prototype = new google.maps.OverlayView(); 
MyOverlay.prototype.onAdd = function() { } 
MyOverlay.prototype.onRemove = function() { } 
MyOverlay.prototype.draw = function() { } 
function MyOverlay(map) { this.setMap(map); } 
var overlay = new MyOverlay(map); 
var projection = overlay.getProjection(); 

Answer 4

我沒對這裏的答案不滿意。所以我做了一些實驗，找到了「最簡單」的工作解決方案，這與拉爾夫的答案很接近，但希望更容易理解。 （我希望谷歌讓這個功能方便使用！）

首先聲明的OverlayView一個子類的地方，像這樣：

function CanvasProjectionOverlay() {} 
CanvasProjectionOverlay.prototype = new google.maps.OverlayView(); 
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay; 
CanvasProjectionOverlay.prototype.onAdd = function(){}; 
CanvasProjectionOverlay.prototype.draw = function(){}; 
CanvasProjectionOverlay.prototype.onRemove = function(){}; 

然後其他地方在你的代碼中實例化地圖，你也實例這OverlayView的並設置其地圖，就像這樣：

var map = new google.maps.Map(document.getElementById('google-map'), mapOptions); 

// Add canvas projection overlay so we can use the LatLng to pixel converter 
var canvasProjectionOverlay = new CanvasProjectionOverlay(); 
canvasProjectionOverlay.setMap(map); 

然後，每當你需要使用fromLatLngToContainerPixel，你只是這樣做：

canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng); 

注意，因爲MapCanvasProjection對象將只提供一次draw()被調用，這是地圖的idle，我建議創建一個布爾「mapInitialized」標誌之前的某個時候，將其設置爲true的第一個地圖idle回調。然後在那之後做你需要做的事情。

Answer 5

我認爲最簡單的方法是忽略谷歌希望通過刪除和隱藏有用的功能而不是添加新的功能來使我們的生活更加艱難，而只是編寫自己的方法來做同樣的事情。

這裏是一個功能某人的版本發佈在其他地方（現在我不能找到它），爲我工作：

fromLatLngToPixel: function (position) { 
    var scale = Math.pow(2, Map.getZoom()); 
    var proj = Map.getProjection(); 
    var bounds = Map.getBounds(); 

    var nw = proj.fromLatLngToPoint(
    new google.maps.LatLng(
     bounds.getNorthEast().lat(), 
     bounds.getSouthWest().lng() 
    )); 
    var point = proj.fromLatLngToPoint(position); 

    return new google.maps.Point(
    Math.floor((point.x - nw.x) * scale), 
    Math.floor((point.y - nw.y) * scale)); 
}, 

現在，你可以把它任何時候，任何地方你想要的。我特別需要它來定製上下文菜單，而且它完美地完成了工作。

編輯：我也寫了相反的作用，fromPixelToLatLng，做完全相反。它只是基於第一個，適用於一些數學運算：

fromPixelToLatLng: function (pixel) { 
    var scale = Math.pow(2, Map.getZoom()); 
    var proj = Map.getProjection(); 
    var bounds = Map.getBounds(); 

    var nw = proj.fromLatLngToPoint(
    new google.maps.LatLng(
     bounds.getNorthEast().lat(), 
     bounds.getSouthWest().lng() 
    )); 
    var point = new google.maps.Point(); 

    point.x = pixel.x/scale + nw.x; 
    point.y = pixel.y/scale + nw.y; 

    return proj.fromPointToLatLng(point); 
}