angularjs谷歌地图-带有窗口的标记-信息窗口未显示 [英] angularjs google maps - markers with window - infowindow not showing
问题描述
尝试使用带有以下内容的 angular-google-maps 来获取应用程序:
-通过markers指令
的多个标记
-通过window指令
Trying to get a app using angular-google-maps with:
- multiple markers via the markers directive
- a single infowindow via the window directive
我已经遍历API和git-hub网站上的多个已解决问题/问题，但无法正常工作...:-/
I've been through the API and multiple closed issues / questions on the git-hub site but just can't get it working... :-/
为简单起见，我手动声明标记(它们正确显示):
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'
}
];
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数组
I'm applying the onClick function to the markers array using this code
$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之间切换...
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...
我在想这是将window html连接到控制器数组和函数的方式吗?感谢您的帮助.
I'm thinking it's the way I've connected the window html to the controller arrays and functions ? Any help is appreciated.
PS API文档示例日期，因为他们在示例中不使用show而是使用options.visible来显示和隐藏信息窗口-但是所有
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 ?
推荐答案
在window指令中，标记的绑定不正确.
Your marker's binding is incorrect in the window directive.
基本上，您需要将一个标记设置为单击时选定的标记，然后将窗口绑定到该选定的标记.有关工作示例，请参见jsfiddle.
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.
<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>
这篇关于angularjs谷歌地图-带有窗口的标记-信息窗口未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
