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

Trying to get a app using angular-google-maps with:
- multiple markers via the markers directive
- a single infowindow via the window directive

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

I've been through the API and multiple closed issues / questions on the git-hub site but just can't get it working... :-/

我已经通过API和git-hub网站上的多个已关闭的问题/问题，但是无法让它正常工作...： - /

jsfiddle

For simplicity, I'm declaring the markers manually (and they're displaying correctly):

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

$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'
    }
];

The html looks like:

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>

I'm applying the onClick function to the markers array using this code

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

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

The marker click functions look like

标记点击功能看起来像

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

The $scope.onClick() function seems to be working on marker click since the console outputs what is expected - and the $scope.windowOptions.show value toggles between true and false...

$ scope.onClick（）函数似乎正在处理标记点击，因为控制台输出了预期的内容 - $ scope.windowOptions.show值在true和false之间切换...

I'm thinking it's the way I've connected the window html to the controller arrays and functions ? Any help is appreciated.

我认为这是我将窗口html连接到控制器阵列和函数的方式？任何帮助表示赞赏。

P.S. The API documentation 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 / examples suggest using show instead ?

附： API文档示例似乎已过时，因为它们不在示例中使用show，而是使用options.visible来显示和隐藏信息窗口 - 但是所有问题/示例建议使用show代替？

4 个解决方案

#1

Your marker's binding is incorrect in the window directive.

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

Basically, you need to set a marker as selected on click and bind the window to that selected marker. See the jsfiddle for a working example.

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

#2

I know this is an old post.

我知道这是一个老帖子。

However, these days I've been struggling myself trying to do this and, moreover, the jsfiddle of the accepted answer is broken and doesn't work with latest versions of angular-google-maps directive. So, I've decided to share a working plunker hoping it can help other people.

然而，这些天我一直在努力做到这一点，而且，接受的答案的jsfiddle被破坏，并且不适用于最新版本的angular-google-maps指令。所以，我决定分享一个工作的plunker，希望它可以帮助其他人。

Plunker here

在这里偷窃

This version is rendering multiple markers but just one window. Only one window can be opened at the same time.

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

It's based on the advises of the official site FAQ Section: See How do I only open one window at a time?

它基于官方网站常见问题解答部分：请参阅我如何一次只打开一个窗口？

html

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>

$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: {} 
  }
};

Hope it helps.

希望能帮助到你。

#3

I know this is old post, but I struggled with Angular Google Map, and solve issue when you open one window for markers. If you use ng-repeat and window for each one - no problems. But when you have a markers directive, and want to show only one window, then you have an issue - window places not above marker and you need change position a little. How to do it? Let me share my experience on that.

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

You just need to specify pixelOffset for windowoptions like that:

你只需要指定像这样的windowoption的pixelOffset：

JS:

JS：

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

HTML:

HTML：

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

That's it. Change height for your needs.

而已。根据您的需求更改高度。

#4

you're better setting the marker model on the scope on click something like this:

你可以在点击这样的东西上更好地在范围上设置标记模型：

marker click callback:

标记点击回调：

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

Then use the selectedMarker in the directive:

然后在指令中使用selectedMarker：

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

simple. assumes your marker model has longitude and latitude set of cause

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

#1