顯示Infowindow後防止Google地圖移動

Question

我試圖在Google地圖上顯示infowindow。它顯示完美，當你將鼠標懸停在標記上時，它會加載一個infowindow，但地圖跳轉到適合窗口。我不想讓地圖移動，而是根據地圖設定其位置。 Booking.com有這樣的事情。

編輯：增加我的代碼

這裏是我的代碼的精簡版。我收到來自AJAX服務的所有信息，此服務返回response（也包含更多信息）。

$.ajax({ 
    url: 'URL', 
    dataType: "json", 
    type: "GET", 
    success: function(response) { 
     // delete all markers 
     clearOverlays(); 

     var infowindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < response.length; i++) { 
      item = response[i]; 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(item.lat, item.lng), 
       map: map, 
       url: item.detail_url 
      }); 

      markersArray.push(marker); 

      // display infowindow 
      google.maps.event.addListener(marker, "mouseover", (function(marker, item) { 
       return function() { 
        infowindow.setOptions({ 
         content: 'SOME CONTENT HERE FOR INFOWINDOW' 
        }); 

        infowindow.open(map, marker); 
       } 
      })(marker, item)); 

      // remove infowindow 
      google.maps.event.addListener(marker, 'mouseout', function() { 
       infowindow.close(); 
      }); 

      // marker click 
      google.maps.event.addListener(marker, 'click', function() { 
       window.location.href = marker.url; 
      }); 
     } 
    } 
}); 

正如下面可以看到，第一圖像示出了在標記物的底部顯示的信息窗口，而第二個示出了在標記物的頂部顯示信息窗口。地圖不移動，但infowindow將其位置設置在地圖的邊界內。

Answer 1

在你的聲明中設置信息窗口選項infowindow.setOptions，下面的選項添加禁用地圖的聲像顯示信息窗口時，disableAutoPan : true。

但是，這也意味着您需要計算可用於在地圖上顯示infowindow的房地產，並使用position選項給它一個位置。否則，不能保證您的infowindow將在地圖上完全可見。

https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions

編輯：如何計算屏幕房地產

我知道我是和我的建議來計算可用來設置你的信息窗口的位置在屏幕房地產，當是很模糊你的問題的一部分是實際設定infowindow的位置。所以我提供了一個關於如何計算屏幕空間並調整你的infowindow位置的答案。

關鍵是首先將您的點從LatLng轉換爲像素，然後找出地圖上與地圖中心的像素座標相關的標記的像素座標。以下片段演示瞭如何做到這一點。

getPixelFromLatLng: function (latLng) { 
    var projection = this.map.getProjection(); 
    //refer to the google.maps.Projection object in the Maps API reference 
    var point = projection.fromLatLngToPoint(latLng); 
    return point; 
} 

一旦你有你的像素座標，你需要找出哪些地圖畫布標記的象限目前居住在，這是通過比較X實現和標記的Y座標來地圖上，像這樣：

quadrant += (point.y > center.y) ? "b" : "t"; 
quadrant += (point.x < center.x) ? "l" : "r"; 

在這裏，我確定的點是在右下角，左下角，右上角或地圖的左上象限基於它在地圖的中心的相對位置。請記住，這就是爲什麼我們使用像素而不是LatLng值，因爲LatLng值始終會產生相同的結果 - 但實際情況是，標記可以位於地圖畫布的任何象限，具體取決於平移。

一旦你知道哪個象限的標誌是，你可以給偏移值的信息窗口因此它的可見在地圖上定位了 - 像這樣：一旦偏移值被確定可以

if (quadrant == "tr") { 
    offset = new google.maps.Size(-70, 185); 
} else if (quadrant == "tl") { 
    offset = new google.maps.Size(70, 185); 
} else if (quadrant == "br") { 
    offset = new google.maps.Size(-70, 20); 
} else if (quadrant == "bl") { 
    offset = new google.maps.Size(70, 20); 
} 
//these values are subject to change based on map canvas size, infowindow size 

只需調整您的infowindow的pixelOffset即可調用infoWindow.open()方法的任何偵聽器。這是通過使用所述setOptions()方法信息窗口完成：

infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)}); 

這裏是上面描述的解決方案的一個工作JSFiddle example。

注：你會發現上顯示desbite您的信息窗口的位置信息窗口的惱人的「箭頭」，這是默認的谷歌地圖的設置對信息窗口的一部分，我找不到擺脫有道它。有一個建議here，但我不能得到它的工作。或者，您可以使用infobox library或infobubble library - 這會爲您提供更多樣式選項。

Answer 2

Suvi Vignarajah的回答非常好，我不喜歡它的是窗口的位置靠近邊緣的不可預測性。

我調整它，這樣的泡沫膠在牆上，因爲它應該期望：http://jsfiddle.net/z5NaG/5/

唯一的條件是，你需要知道的信息窗口的width & height，可以很好地定位。你可以通過地圖的像素來解決問題。如果您不知道它，您可以將InfoWindow初始化爲屏幕外的大小，然後在正確的位置再次打開它。醜陋但會起作用。

首先運行該功能上覆蓋初始化在地圖初始化的時間：

ourOverlay:null, 
    createOverlay:function(){ 
     this.ourOverlay = new google.maps.OverlayView(); 
     this.ourOverlay.draw = function() {}; 
     this.ourOverlay.setMap(this.map); 
    }, 

然後在open事件調整偏移，像這樣：

getInfowindowOffset: function (map, marker) { 
    // Settings 
    var iwWidth = 240; // InfoWindow width 
    var iwHeight = 190; // InfoWindow Height 
    var xOffset = 0; 
    var yOffset = 0; 

    // Our point of interest 
    var location = this.ourOverlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 

    // Get Edges of map in pixels: Sout West corner and North East corner 
    var swp = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getSouthWest()); 
    var nep = this.ourOverlay.getProjection().fromLatLngToContainerPixel(map.getBounds().getNorthEast()); 

    // Horizontal Adjustment 
    if(location.x<iwWidth/2){ 
     xOffset= iwWidth/2-location.x; 
    }else if(location.x>nep.x-iwWidth/2){ 
     xOffset = (nep.x-iwWidth/2)-location.x ; 
    } 

    // Vertical Adjustment 
    if(location.y<iwHeight){ 
     yOffset = location.y + iwHeight-(location.y-nep.y); 
    } 

    // Return it 
    return new google.maps.Size(xOffset, yOffset); 

}, 

，結果是相當不錯的，但這個三角形現在看起來不合適。

您可以使用InfoBox以消除底部尖尖的箭頭：

  GmapsManager.infowindow = new InfoBox({ 
      content:'', 
      alignBottom: true, 
      closeBoxURL: "", 
     }); 

和風格泡沫用下面的代碼：

.infobox-popup{ 
    background: #fff; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    padding: 5px; 
    margin-left: -100px; 
    margin-bottom: 30px; 
    width: 200px; 
    -webkit-box-shadow: 0 0 1px 0 #595959; 
    box-shadow: 0 0 1px 0 #595959; 
}