尝试使用angular-google-maps获取应用：
– 通过markers指令的多个标记
– 通过window指令的单个infowindow
– 通过markers指令的多个标记
– 通过window指令的单个infowindow
我已经通过API和git-hub网站上的多个已关闭的问题/问题,但是无法让它正常工作…： – /
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);
};
});
};
标记点击功能看起来像
$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()函数似乎正在处理标记点击,因为控制台输出了预期的内容 – $scope.windowOptions.show值在true和false之间切换…
我认为这是我将窗口html连接到控制器数组和函数的方式？任何帮助表示赞赏.
附： api文档examples似乎已过时,因为它们不在示例中使用show,而是使用options.visible来显示和隐藏infowindows – 但是所有issues / examples建议使用show代替？
您的标记的绑定在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/