gor*_*rds 7 infowindow marker angularjs angular-google-maps
尝试使用得到应用的角度,谷歌,地图:与
通过多个标记- markers指令
通过一个单一的信息窗口- window指令
我已经通过API和git-hub网站上的多个已关闭的问题/问题,但是无法让它工作......: - /
为简单起见,我手动声明标记(并且它们正确显示):
$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...
我认为这是我将windowhtml 连接到控制器阵列和功能的方式？任何帮助表示赞赏.
PS API文档示例似乎已过时,因为它们不在show示例中使用,而是options.visible显示和隐藏信息窗口 - 但是然后所有问题 /示例建议使用show？
tro*_*oig 10
我知道这是一个老帖子.
然而,这些天我一直在努力做到这一点,而且,接受的答案的jsfiddle被打破了,并且不适用于最新版本的angular-google-maps指令.所以,我决定分享一个工作的plunker,希望它可以帮助其他人.
此版本渲染多个标记,但只有一个窗口.只能同时打开一个窗口.
它基于官方网站常见问题解答部分:请参阅我如何一次只打开一个窗口？
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: {}
}
};
希望能帮助到你.
您的标记的绑定在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>
| 归档时间： |
|
| 查看次数： |
22355 次 |
| 最近记录： |