我正在尝试实现一个自定义 infoBubble,它的框打开到标记的侧面,而不是顶部的默认位置。事实证明这比预期的要困难。
使用普通的infoWindow,您可以使用pixelOffset。请参阅此处文档 https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions
使用 infoBubble 似乎并非如此。无论如何,是否可以在 infoBubble 中使用 PixelOffset,或者可以做同样的事情?
我发现这个很难搜索,因为使用谷歌搜索这样的搜索不会返回任何相关结果
以下是我一直在使用的所有资源。
现在我的 javascript 在这里,以防 jsfiddle 链接损坏。
<script type="text/javascript">
$(document).ready(function () {
init();
});
function init() {
//Setup the map
var googleMapOptions = {
center: new google.maps.LatLng(53.5167, -1.1333),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Start the map
var map = new google.maps.Map(document.getElementById("map_canvas"),
googleMapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(53.5267, -1.1333),
title: "Just a test"
});
marker.setMap(map);
infoBubble = new InfoBubble({
map: map,
content: '<div class="phoneytext">Some label</div>',
//position: new google.maps.LatLng(-35, 151),
shadowStyle: 1,
padding: '10px',
//backgroundColor: 'rgb(57,57,57)',
borderRadius: 5,
minWidth: 200,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 7,
backgroundClassName: 'phoney',
pixelOffset: new google.maps.Size(130, 120),
arrowStyle: 2
});
infoBubble.open(map, marker);
}
</script>
Update
为了帮助回答这个问题,我在此处整理了一个测试用例。重要的行是第 38 行和第 39 行,它们应指定标签的放置位置。
Update 2
为了获得赏金,我需要查看远离标记上方默认位置的 infoBubble 示例。最好在标记的右侧。
Update 3
我已从更新 1 中删除了测试用例,因为它托管在我原来公司的服务器上。