尝试使用以下方式获取应用程序角度谷歌地图 with:
- 通过多个标记markers
指示
- 通过的单个信息窗口window
指示
我已经了解了 API 和 github 网站上的多个已解决的问题,但就是无法让它工作......:-/
jsfiddle http://jsfiddle.net/goredwards/pd27yoe0/
为简单起见,我手动声明标记(并且它们正确显示):
$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);
};
});
};
The 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;
};
The $scope.onClick()
功能似乎正在运行marker
单击,因为控制台输出了预期的内容 - 并且$scope.windowOptions.show
值在之间切换true
and false
...
我想这就是我连接的方式window
html 到控制器数组和函数?任何帮助表示赞赏。
P.S.API 文档examples http://angular-ui.github.io/angular-google-maps/#!/api似乎已经过时了,因为他们不使用show
在这个例子中而是options.visible
显示和隐藏信息窗口 - 但然后所有issues https://github.com/angular-ui/angular-google-maps/issues/772/ 示例建议使用show
反而 ?