显示Infowindow后，防止Google地图移动 [英] Preventing Google Maps Move After Displaying Infowindow
问题描述
我试图在Google地图上展示infowindow。它显示完美，当你将鼠标悬停在标记上时，它会加载一个infowindow，但地图跳转到适合窗口。我不想让地图移动，而是根据地图设定其位置。 Booking.com有这样的功能。
编辑：新增了我的代码
这是我的代码的精简版本。我收到来自 AJAX服务的所有信息，并且此服务返回响应（也包含更多信息）。
$。ajax（{
url：'URL'，
dataType：json，
type： GET，
成功：函数（响应）{
//删除所有标记
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，$ b $ url url：item.detail_url
}）;
markersArray.push（marker）;
//显示infowindow
google.maps.event.addListener（marker，mouseover，（function （marker，item）{
return function（）{
infowindow.setOptions（{
content：'某些内容适用于INFOWINDOW'
}）;
infowindow.open（map，marker）;
}
}）（marker，item））;
删除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，而第二张显示了infowindow显示在标记顶部。地图不会移动，但infowindow将它的位置设置在地图的边界内。
当显示infowindow时，以下选项禁用地图平移， disableAutoPan：true 。然而，这也意味着您需要计算您可以在地图上显示infowindow的房地产，并使用<$ c $给它一个位置c>位置选项。否则，不能保证您的infowindow将在地图上完全可见。
https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions
编辑：如何计算屏幕空间 我知道我对我的建议非常含糊，当你的问题的一部分是实际设置infowindow的位置时，屏幕房地产可用来设置你的infowindow的位置。因此，我提供了一个关于如何计算屏幕空间并调整您的infowindow位置的答案的更新。
关键是首先将您的点数从LatLng到像素，并找出地图上标记的像素坐标与地图中心的像素坐标的关系。以下片段演示了如何完成这项工作。
getPixelFromLatLng：function（latLng）{
var projection = this。 map.getProjection（）;
//引用Maps API参考中的google.maps.Projection对象
var point = projection.fromLatLngToPoint（latLng）;
回报点;
}
一旦获得了像素坐标，就需要找出标记的地图画布的象限当前位于哪个象限中。通过比较标记的X和Y坐标到地图来实现，如下所示：
象限+ =（point.y> center.y）？ b：t;
象限+ =（point.x< center.x）？ l：r;
在这里，我确定点是在右下角，左下角，右上角还是右下角地图的左上象限基于它与地图中心的相对位置。请记住，这就是为什么我们使用像素而不是LatLng值，因为LatLng值总是会产生相同的结果 - 但实际情况是，标记可以位于地图画布的任何象限，具体取决于平移。
一旦你知道标记所在的象限，你可以给infowindow赋予偏移值，使它在地图上可见 - 就像这样：
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）;
}
//这些值可能会根据地图画布大小，infowindow大小
一旦确定了偏移值，您可以在调用 infoWindow.open（）的任何监听器上调整infowindow的方法。这是通过对infowindows使用 pixelOffset setOptions（）方法完成的：
infowindow.setOptions（{pixelOffset：self.getInfowindowOffset（self.map，marker）}）;
以下是一份工作 JSFiddle示例。 注意：您会注意到infowindow上令人讨厌的箭头显示了您的infowindow的位置，这是默认Google的一部分Map的infowindows设置，我无法找到摆脱它的正确方法。有一个建议这里，但我无法让它工作。或者，您可以使用信息库库或信息库 - 它给你更多的造型选择。
I'm trying to display a infowindow on a Google Maps. It displays perfect, when you hover over a marker it loads up a infowindow but the map jumps to fit in the window. I don't want the map to move but rather infowindow set its position according to map. Booking.com has something like this.
EDIT: Added my code
Here is the stripped down version of my code. I'm getting all the info from an AJAX service and this service returns response (which holds some more info too).
$.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;
});
}
}
});
As you can see below, the first image shows the infowindow displayed at bottom of marker while second one shows the infowindow displayed on top of the marker. The map doesn't move but infowindow sets its position within the boundries of the map.
In your declaration for setting the info window options infowindow.setOptions, add the following option to disable the panning of the map when the infowindow is displayed, disableAutoPan : true.
However this will also mean you'll need to calculate the real estate you have available to display the infowindow on your map and give it a position using the position option. Otherwise it won't be guaranteed that your infowindow will be completely visible on the map.
https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions
EDIT: How to calculate screen real estate
I realize I was pretty vague with my suggestion to calculate the screen real estate available to set the position of your infowindow, when part of your question was to actually set the infowindow's position. So I've provided an update to my answer on how you can calculate the screen real estate and adjust your infowindow's position.
The key is to first convert your points from LatLng to pixels, and find out the pixel coordinate of the marker on the map with relation to the pixel coordinate of the map's center. The following snippet demonstrates how this can be done.
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;
}
Once you've got your pixel coordinates, you'll need to find out which quadrant of the map canvas the marker is currently residing in. This is achieved by comparing the X and Y coordinates of the marker to the map, like so:
quadrant += (point.y > center.y) ? "b" : "t";
quadrant += (point.x < center.x) ? "l" : "r";
Here, I'm determining if the point is in the bottom right, bottom left, top right or top left quadrant of the map based on it's relative position to the map's center. Keep in mind this is why we use pixels as opposed to LatLng values, because LatLng values will always yield the same result - but reality is the marker can be in any quadrant of the map canvas depending on panning.
Once you know which quadrant the marker is in, you can give offset values to the infowindow to position it so it's visible on the map - like so:
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
Once the offset value is determined you can just adjust the pixelOffset of your infowindow on whatever listener you have invoking the infoWindow.open() method. This is done by using the setOptions() method for infowindows:
infowindow.setOptions({pixelOffset : self.getInfowindowOffset(self.map, marker)});
Here is a working JSFiddle example of the solution described above.
Note: You will notice the annoying "arrow" on the infowindow displaying desbite the position of your infowindow, this is part of the default Google Map's setting for infowindows and I could not find a proper way of getting rid of it. There was a suggestion here, but I couldn't get it to work. Alternatively you can use the infobox library or the infobubble library - which gives you more styling options.
这篇关于显示Infowindow后，防止Google地图移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
