AngularJS 谷歌地图信息窗口答案

【问题标题】：AngularJS google map infowindowAngularJS 谷歌地图信息窗口
【发布时间】：2015-05-14 10:26:12
【问题描述】：

我正在使用 angular-google-map api http://angular-ui.github.io/angular-google-maps/#!/api

信息窗口显示在标记的顶部。他们是否可以将其位置更改为右侧，顶部与标记对齐？我看到一些完全自定义的信息窗口具有自定义位置和自定义颜色，但我们从来没有代码或它是如何完成的。你有任何代码示例或教程给我看吗？谢谢

更新：

信息框而不是信息窗口可以解决问题。但是我没有设法找到一种方法来使用我的 angular-google-map ui 中的信息框。有人可以帮忙吗？

【问题讨论】：

有InfoWindowOptions 可用，您可以更改pixelOffset 或position 属性，从而可以更改您的信息窗口位置。
谢谢，我会检查这个解决方案
我没有找到一种方法来做我想做的事。我想像这个网站booking.com/city/nl/amsterdam.fr.html#map_opened 一样完全自定义地图信息窗口，例如，当您单击带有建筑物图标的标记时

标签： angularjs google-maps google-maps-api-3 angular-google-maps

【解决方案1】：

可以在 window.options 参数 pixelOffset 内设置地图对象

map: {
  control: {},
  ...
  window: {
   ...
    options: {
      visible: false,
      pixelOffset: {
        width: -1,
        height: -25
      }
    }
  }

【讨论】：

【解决方案2】：

我在他们的支持页面上提出了同样的问题，并得到了宝贵的答复。你可以在这里找到它https://github.com/angular-ui/angular-google-maps/issues/1434#issuecomment-130292587

由于 Angular 谷歌地图库中包含信息框，您只需提供以下选项

windowOptions:{
   boxClass: "YOUR CSS CLASS",
   boxStyle: { "YOUR STYLE" }
}

然后像这样在你的视图中使用它

<ui-gmap-google-map>
<ui-gmap-window options="windowOptions"></ui-gmap-window>
</ui-gmap-google-map>

小提琴：http://jsfiddle.net/Danscho/L789znLk/

【讨论】：

我无法找到此文档的记录位置，但它运行良好，谢谢！
你知道如何在多个窗口上应用相同的效果吗？ jsfiddle.net/crsex1sk
@jlafforgue 您应该查看angular-ui.github.io/angular-google-maps/#!/api 的官方文档，请同时查看window 和windows。在窗口中传递表达式，而在窗口中传递模型数组中的属性名称
非常感谢您提供的信息！我试图在模型中移动我的值，但它不起作用，我的控制台出现错误......可能是我没有使用正确的过程吗？ jsfiddle.net/jj4v9n8oUnable to get gMarker from markersScope!