尝试使用 angular-google-maps 获取应用:
- 通过 markers 指令实现多个标记
- 通过 window 指令的单个信息窗口
我已经了解了 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() 函数似乎正在处理 marker 点击，因为控制台输出了预期的内容 - 以及 $scope.windowOptions。显示值在true和false之间切换...
我认为这是我将 window html 连接到 Controller 数组和函数的方式？如有任何帮助，我们将不胜感激。
P.S. API 文档 examples似乎已经过时了，因为他们在示例中不使用 show 而是使用 options.visible 来显示和隐藏信息窗口 - 但随后所有 issues/示例建议使用 show 代替？
最佳答案
我知道这是一篇旧帖子。
但是，这些天我一直在努力尝试做到这一点，而且，接受的答案的 jsfiddle 已损坏，并且不适用于最新版本的 angular-google-maps指示。因此，我决定分享一个可以工作的 plunker，希望它可以帮助其他人。
此版本正在渲染多个标记，但仅渲染一个窗口。同一时间只能打开一个窗口。
根据官网建议FAQ Section :请参阅如何一次只打开一个窗口？
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: {}
}
};
希望有帮助。
关于angularjs 谷歌地图 - 带窗口的标记 - 信息窗口未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28291980/