javascript - Google Maps InfoBubble pixelOffset(从标记上方的默认位置移动)

我正在尝试实现一个自定义infoBubble，该框的框在标记的侧面开口，而不是默认位置在顶部。事实证明，这比预期的要难。

使用普通的infoWindow可以使用pixelOffset。看到这里的documentation

使用infoBubble似乎并非如此。无论如何，是否在infoBubble中使用pixelOffset，或者会做同样的事情？

我发现这很难搜索，因为使用google搜索之类的搜索不会返回任何相关结果Google Search

以下是我一直在使用的所有资源。

infoBubble here的示例。

我的JavaScript，用于设置 map 和infoBubble here。

现在，这里的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>

更新

为了帮助回答这个问题，我在这里整理了一个测试用例。重要的行是行38和39，应指定标签的放置位置。

更新2

为了获得赏金，我需要查看infoBubble的示例，该示例远离其在标记上方的默认位置。最好在标记的右侧。

更新3

我已经从更新1中删除了测试用例，因为它托管在我的旧公司的服务器上。

最佳答案

似乎infoBubble库本身默认将气泡放置在绑定(bind)到的标记上方。看一看它们包含在库中的示例文件:http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/examples/example.html。特别注意从99行到122行以及两个信息气泡的使用。第一个绑定(bind)到标记，但是第二个是独立的，因此，如果看到第106行，则可以为其定义位置。现在，基于这种理解，我在这个小提琴http://jsfiddle.net/pDFc3/中为您创建了一个示例。 infoBubble位于标记的右侧。

这很奇怪，因为infoBubble js库具有用于setPosition(http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js?r=206)的功能，请参见第1027行。但是由于某些原因，在我等待DOM加载并尝试通过infoBubble.setPosition(newLatLng);更改位置后，我不起作用。相反，在DOM加载后声明infoBubble.getPosition();将为我提供infoBubble绑定(bind)到的标记的当前位置。所以setPosition()可能在js库中有一个错误，因为我认为它仍在工作(我可能是错误的，也许只是错误)。

我已经修复了jsFiddle，以解决您在放大和缩小以及相应地定位infoBubble(http://jsfiddle.net/pDFc3/)时遇到的问题。首先让我解释一下逻辑。首先，对于路线图类型，Google map 上的最大缩放级别为21-该值与卫星图像不一致，但是用户可以转到的最大缩放级别为21。从21开始，每次缩小两个点之间的差异可以是根据以下逻辑在屏幕上保持一致:

consitent_screen_dist = initial_dist * (2 ^ (21 - zoomlevel))

在我们的情况下，初始距离的合理值为0.00003度(标记和infoBubble之间)。因此，基于此逻辑，我添加了以下内容以查找标记和infoBubble之间的初始纵向距离:

var newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom())));

同样，为确保距离在每次缩放级别更改时保持一致，我们在侦听缩放级别的更改时只需声明一个新的经度即可:

    google.maps.event.addListener(map, "zoom_changed", function() {
        newlong = marker.getPosition().lng() + (0.00003 * Math.pow(2, (21 - map.getZoom())));
        infoBubble.setPosition(new google.maps.LatLng(marker.getPosition().lat(), newlong));
    });

请记住，可以通过声明marker.getPosition的变量和通过方法调用的其他值来使此代码更高效。这样就不会重复方法调用，并降低代码速度。