在Google Maps API V3中光標靠近地圖邊緣時移動地圖

Question

我使用Rectangle形狀工具構建了一個選擇工具。您可以通過在矩形上繪製矩形來選擇標記，並釋放該矩形（就像在桌面操作系統上選擇東西一樣）。

這個效果很好，只是當你到達地圖邊緣時Google Maps不會平移，所以如果它剛剛離開屏幕就不能繼續你的選擇。就像在網頁上選擇文本並選擇摺疊下方的文本一樣，它會向下滾動。

我知道如何平移和居中地圖，但我不確定如何使用這些來獲得平滑的滾動感覺，因爲你到達地圖的邊緣。

Answer 1

我敢肯定有來處理這一個更高性能，更好，更清潔的方式，但是這是我最後使用：

/** 
* This pans the map when the user is moused down and at the end of the map 
* bounding box. 
* 
* @return {undefined} 
*/ 
DrawingManager.prototype._mapPanHandler = function (googleMapEvent) { 
    var self = this; 
    var event = googleMapEvent; 

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

    var projection = overlay.getProjection(); 
    var pixelpoint = projection.fromLatLngToDivPixel(map.getCenter()); 

    var proj = overlay.getProjection(); 
    var thepix = proj.fromLatLngToDivPixel(event.latLng); 

    var nE = map.getBounds().getNorthEast(); 
    var sW = map.getBounds().getSouthWest(); 
    var nE = proj.fromLatLngToDivPixel(nE); 
    var sW = proj.fromLatLngToDivPixel(sW); 

    var north = nE.y; 
    var east = nE.x; 
    var south = sW.y; 
    var west = sW.x; 

    var appx_north, appx_east, appx_south, appx_west; 

    if (Math.round(thepix.y) <= Math.round(north + 50)) {appx_north = true;} 
    if (Math.round(thepix.x) >= Math.round(east - 50)) {appx_east = true;} 
    if (Math.round(thepix.y) >= Math.round(south - 50)) {appx_south = true;} 
    if (Math.round(thepix.x) <= Math.round(west + 50)) {appx_west = true;} 

    clearInterval(self._panTimer); 

    if (!appx_north && !appx_east && !appx_south && !appx_west) { 
    return; 
    } 

    var panMap = function() { 
    var movementAmount = 3; 
    if (appx_north) { pixelpoint.y -= movementAmount; } 
    if (appx_east) { pixelpoint.x += movementAmount; } 
    if (appx_south) { pixelpoint.y += movementAmount; } 
    if (appx_west) { pixelpoint.x -= movementAmount; } 
    point = projection.fromDivPixelToLatLng(pixelpoint); 
    map.setCenter(point); 
    } 

    panMap(); 
    self._panTimer = setInterval(panMap, 10); 
}; 

Answer 2

做8個額外的矩形在屏幕上，他們是透明的，也許possitioned與js支持絕對是個好主意。

當用戶選擇：

If users mouse is on area1 -> go north-west (code it) 
If users mouse is on area2 -> go north (code it) 
If users mouse is on area3 -> go north-east (code it) 
If users mouse is on area4 -> go east (code it) 
If users mouse is on area5 -> go south-east (code it) 
If users mouse is on area6 -> go south (code it) 
If users mouse is on area7 -> go south-west (code it) 
If users mouse is on area8 -> go west (code it) 

如果地圖可旋轉 - 你必須調整滾動。

如果您想要進行平滑的動畫，您可以做... 以area1爲例：取y軸並將其與鼠標位置進行比較，並調整加速度和最小/最大速度。 對於角落，你可以去正常的點對點距離數學。

畢竟你可以聲明徑向加速度，但我認爲如果應用程序也交付給它，它會使低規格的智能手機崩潰。