我正在构建一个主要功能是 map 搜索并显示英国各地发生的职业摔跤赛事的网站。我正在使用 Google Maps JavaScript API v3 来实现这一点,但我有一个问题,为什么我的应用程序的 InfoWindows 看起来与 maps.google.co.uk 上的 InfoWindows 不同? .
比较以下两个屏幕截图。我的:
以及 Google map 网站:
为什么 Google map 网站的 InfoWindows 是方形的,为什么我使用最新版 Google Maps JavaScript API 的应用程序的 InfoWindows 是圆形的?
最佳答案
马丁,
我去看了 Google Maps API 演示并找到了这个演示:
您应该会看到方形的信息窗口。
我查看了底层代码,发现了下面的代码,可能是您窗口的边界覆盖。希望对您有所帮助。
var openInfoWindow = function(resultNum, result, marker) {
return function() {
if (selected != null) {
document.getElementById('p' + selected).style.backgroundColor = "white";
clearBoundsOverlays();
}
map.fitBounds(result.geometry.viewport);
infowindow.setContent(getAddressComponentsHtml(result.address_components));
infowindow.open(map, marker);
if (result.geometry.bounds) {
boundsOverlay = new google.maps.Rectangle({
'bounds': result.geometry.bounds,
'strokeColor': '#ff0000',
'strokeOpacity': 1.0,
'strokeWeight': 2.0,
'fillOpacity': 0.0
});
boundsOverlay.setMap(map);
google.maps.event.addListener(boundsOverlay, 'click', onClickCallback);
document.getElementById('boundsLegend').style.display = 'block';
} else {
boundsOverlay = null;
}
viewportOverlay = new google.maps.Rectangle({
'bounds': result.geometry.viewport,
'strokeColor': '#0000ff',
'strokeOpacity': 1.0,
'strokeWeight': 2.0,
'fillOpacity': 0.0
});
viewportOverlay.setMap(map);
google.maps.event.addListener(viewportOverlay, 'click', onClickCallback);
document.getElementById('viewportLegend').style.display = 'block';
document.getElementById('p' + resultNum).style.backgroundColor = "#eeeeff";
document.getElementById('matches').scrollTop =
document.getElementById('p' + resultNum).offsetTop -
document.getElementById('matches').offsetTop;
selected = resultNum;
}
}
关于javascript - 获取带有 Google map 的新方形 InfoWindows?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7805240/