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和false之间切换...

我认为我将window html连接到控制器阵列和功能的方式是什么？任何帮助表示赞赏。

PS API文档examples似乎已过时，因为他们不在示例中使用show，而是options.visible来显示和隐藏infowindows - 然后所有issues /示例建议使用show代替？

Answer 1

我知道这是一个老帖子。

然而，这些天我一直在努力做到这一点，而且，接受的答案的jsfiddle被打破了，并且不适用于最新版本的angular-google-maps指令。因此，我决定分享一名工作人员，希望能帮助其他人。

Plunker here

此版本渲染多个标记但只有一个窗口。只能同时打开一个窗口。

它基于官方网站FAQ Section的建议：请参阅我如何一次只打开一个窗口？

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

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

基本上，您需要在点击时将标记设置为选中并将窗口绑定到所选标记。有关工作示例，请参阅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 3

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

你只需为这样的windowoptions指定 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>

就是这样。根据您的需要更改身高。

Answer 4

您可以点击以下内容更好地在示波器上设置标记模型：

标记点击回调：

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

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

angularjs google maps - 带窗口的标记 - infowindow不显示

jsfiddle

4 个答案: