angularjs google 地图 - 带有 window 的标记 - 信息window 未显示

Question

尝试使用 angular-google-maps 获取应用程序，其中：
- 通过 markers 指令
的多个标记 - 通过 window 指令

的单个信息窗口

我已经在 git-hub 网站上完成了 API 和多个已解决的问题/问题，但就是无法正常工作... :-/

jsfiddle

为简单起见，我手动声明标记（并且它们显示正确）：

$scope.markers = [
    {
        id: 0,
        coords: {
            latitude: 37.7749295,
            longitude: -122.4194155
        },
        data: 'restaurant'
    },
    {
        id: 1,
        coords: {
            latitude: 37.79,
            longitude: -122.42
        },
        data: 'house'
    },
    {
        id: 2,
        coords: {
            latitude: 37.77,
            longitude: -122.41
        },
        data: 'hotel'
    }
];

html 看起来像：

<body ng-app="app">
    <div class="angular-google-map-container" ng-controller="MainCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
            <ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
                <div>Hello</div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
            </ui-gmap-markers>
        </ui-gmap-google-map>
    </div>
</body>

我正在使用此代码将 onClick 函数应用于 markers 数组

$scope.addMarkerClickFunction = function(markersArray){
    angular.forEach(markersArray, function(value, key) {
        value.onClick = function(){
                $scope.onClick(value.data);
            };
    });
};

marker click 函数看起来像

$scope.windowOptions = {
    show: false
};

$scope.onClick = function(data) {
    $scope.windowOptions.show = !$scope.windowOptions.show;
    console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
    console.log('This is a ' + data);
};

$scope.closeClick = function() {
    $scope.windowOptions.show = false;
};

$scope.onClick() 函数似乎在 marker 上起作用，因为控制台输出了预期的结果 - $scope.windowOptions.show 值在 true 和 [=26 之间切换=]...

我在想这是我将 window html 连接到控制器数组和函数的方式吗？感谢任何帮助。

P.S. API 文档 examples seem out of date since they don't use show in the example but rather options.visible to show and hide infowindows - but then all the issues / 示例建议改用 show ?

Answer 1

您的标记在 window 指令中的绑定不正确。

基本上，您需要将标记设置为单击时选中，并将 window 绑定到该选中的标记。有关工作示例，请参阅 jsfiddle。

<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
        <ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>
        <ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
        </ui-gmap-markers>
    </ui-gmap-google-map>
</div>

http://jsfiddle.net/gqkmyjos/

Answer 2

你最好在示波器上设置标记模型，然后点击这样的东西：

标记点击回调：

$scope.onClick = function(marker) {
  $scope.selectedMarker = marker.model;
}

然后在指令中使用selectedMarker:

<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>

简单。假设您的标记模型具有经度和纬度集 cause

Answer 3

我知道这是旧的post。

但是，这些天我一直在努力尝试这样做，此外，已接受答案的 jsfiddle 已损坏，并且不适用于最新版本的 angular-google-maps 指令。所以，我决定分享一个工作的plunker，希望它能帮助到其他人。

Plunker here

此版本正在渲染多个标记，但只有一个 window。只能同时打开一个window

根据官方网站的建议FAQ Section：参见如何一次只打开一个window？

html

<ui-gmap-google-map center="map.center" zoom="map.zoom">

  <ui-gmap-window 
    show="map.window.show" 
    coords="map.window.model" 
    options="map.window.options" 
    closeClick="map.window.closeClick()"
    templateUrl="'infowindow.tpl.html'" 
    templateParameter="map.window">
  </ui-gmap-window>

  <ui-gmap-markers  
    models="map.markers" 
    coords="'self'"  
    events="map.markersEvents"
    options="'options'">
  </ui-gmap-markers>

</ui-gmap-google-map>

js

$scope.map = {
  center: {
    latitude: 39.5925511,
    longitude: 2.633202
  },
  zoom: 14,
  markers: [],  // Markers here
  markersEvents: {
    click: function(marker, eventName, model) {
      $scope.map.window.model = model;
      $scope.map.window.show = true;
    }
  },
  window: {
    marker: {},
    show: false,
    closeClick: function() {
      this.show = false;
    },
    options: {} 
  }
};

希望对您有所帮助。

Answer 4

我知道这是旧的 post，但我在使用 Angular Google 地图时遇到了困难，并在打开一个 window 作为标记时解决了问题。如果您对每个都使用 ng-repeat 和 window - 没问题。但是当你有一个标记指令，并且只想显示一个 window 时，你就会遇到问题 - window 不在标记上方，你需要稍微改变位置。怎么做？让我分享一下我的经验。

您只需为 window 选项指定 pixelOffset 即可：

JS:

$scope.windowOptions = {
    pixelOffset : {
        height: -25,
        width: 0
    }
};

HTML:

<ui-gmap-window coords='selectedmarker.coords' show='true'  options='windowOptions'>
@{{ selectedmarker.tagline }}
</ui-gmap-window>

就是这样。根据需要更改高度。

angularjs google 地图 - 带有 window 的标记 - 信息window 未显示

angularjs google maps - markers with window - infowindow not showing

infowindow

marker

angularjs

angular-google-maps

jsfiddle