Javascript 谷歌地图信息气泡像素偏移量（从标记上方的默认位置移动）

我正在尝试实现一个定制的infoBubble，它将框打开到标记的一侧，而不是默认的顶部位置。事实证明，这比预期的要困难

使用法线信息窗口，可以使用像素偏移。请看这里了解详细信息

使用infoBubble，情况似乎并非如此。在infoBubble中是否有使用pixelOffset的方法，或是做同样的事情的方法

我发现这很难搜索，因为使用这样的谷歌搜索不会返回任何相关结果

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

• infoBubble的例子

• 我的JavaScript用于设置地图和infoBubble

现在我的javascript在这里，以防JSFIDLE链接被破坏

<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>

$（文档）.ready（函数（）{
init（）；
});
函数init（）{
//设置地图
变量googleMapOptions={
中心：新google.maps.LatLng（53.5167，-1.1333），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//启动地图
var map=new google.maps.map（document.getElementById（“map_canvas”），
谷歌地图选项）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（53.5267，-1.1333），
标题：“只是一个测试”
});
marker.setMap（map）；
infoBubble=新的infoBubble({
地图：地图，
内容：“一些标签”，
//职位：新google.maps.LatLng（-35151），
阴影风格：1，
填充：“10px”，
//背景颜色：“rgb（57,57,57）”，
边界半径：5，
最小宽度：200，
箭头尺寸：10，
边框宽度：1，
边框颜色：“#2c2c”，
是的，
hideCloseButton:false，
箭头位置：7，
backgroundClassName:'假'，
pixelOffset：新的google.maps.Size（130120），
箭头样式：2
});
打开（地图、标记）；
}

更新

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

更新2

对于要授予的赏金，我需要看到一个infoBubble的示例，它的位置远离标记上方的默认位置。最好在标记的右侧

更新3

---

我已经从update 1中删除了testcase，因为它托管在我以前公司的服务器上。

不幸的是，InfoBubble中没有pixelOffset这样的选项。但是，如果在示例中只想在标记上方向上移动气泡，则不应在气泡初始化时设置map参数。考虑下面的小提琴（我为你固定）：

---

另外，你的小提琴不起作用，因为你没有正确添加资源

---

似乎infoBubble库本身默认将气泡定位在绑定到的标记上方。请查看库中包含的示例文件：。特别注意从第99行到第122行以及两个InfoBubble的使用。第一个标记绑定到标记，但是第二个标记是独立的，因此如果看到第106行，可以为其定义位置。现在，基于这种理解，我在这把小提琴上为你们创建了一个例子。信息气泡位于标记的右侧

这很奇怪，因为infoBubble js库有一个setPosition（）函数，请参见第1027行。但是由于某种原因，在我等待DOM加载并尝试通过进入

infoBubble.setPosition（newLatLng）来更改位置之后我不工作。相反，声明
infoBubble.getPosition（）加载DOM后，会给我infoBubble绑定到的标记的当前位置。因此setPosition（）在js库中可能有一个bug，因为我相信它仍在开发中（我可能错了，可能只是bug）


我已经修复了我的JSFIDLE来解决您在放大和缩小时的问题，并相应地定位infoBubble（）。让我先解释一下逻辑。首先，谷歌地图上道路地图类型的最大缩放级别为21-该值与卫星图像不一致，但用户可以使用的最大缩放级别为21。从21开始，每次缩小两点之间的差异时，可根据以下逻辑在“屏幕上”保持一致：

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

在我们的例子中，初始距离的合理值为0.00003度（在marker和infoBubble之间）。因此，基于这一逻辑，我添加了以下内容，以找到marker和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和通过方法调用的其他值声明变量，可以使此代码更加高效。这样，方法调用就不会重复，从而降低代码的速度。
我刚刚遇到了完全相同的问题，但在任何地方都找不到答案。通过一点尝试和错误，我把它解决了

您将在“infoBubble”中使用GoogleJS文件。进入此文件并搜索

InfoBubble.prototype.buildDom_ = function() {

对我来说，这是在第203行（但这可能是之前的洗牌和编辑的结果）

在该函数中，您将看到位置“绝对”声明。在新行中，可以添加marginTop、marginRight、marginBottom和marginLeft。这将使气泡从其默认位置移动（这也取决于配置中的箭头位置声明）

这是我在bubble JS文件中的代码调整，它将bubble放置在顶部
var bubble = this.bubble_ = document.createElement('DIV');
bubble.style['position'] = 'absolute';
bubble.style['marginTop'] = this.px(21);
bubble.style['marginLeft'] = this.px(1);
bubble.style['zIndex'] = this.baseZIndex_;

bubble.className = 'bubble-container';

var infoBubble = new InfoBubble({
  map: map,
  content: "My Content",
  position: new google.maps.LatLng(1, 1),
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'transparent',
  borderRadius: 7,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 50,
  backgroundClassName: 'infoBubbleBackground',
  arrowStyle: 2

});

infoBubble.setBubbleOffset(0,-32);

var anchorHeight = YOURNUMBER;