7

尝试使用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);
            };
    });
};

功能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之间切换truefalse

我在想这是我将windowhtml 连接到控制器数组和函数的方式吗？任何帮助表示赞赏。

PS API 文档示例似乎已过时，因为它们没有show在示例中使用，而是options.visible显示和隐藏 infowindows - 但是所有问题/示例都建议show改用？

4

4 回答 4

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: {} 
  }
};

希望能帮助到你。

于 2016-02-13T16:31:49.693 回答
5

您的标记绑定在 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/

于 2015-02-03T05:58:00.860 回答
3

我知道这是旧帖子，但我在使用 Angular Google Map 时遇到了问题，并在您打开一个标记窗口时解决了问题。如果你对每一个都使用 ng-repeat 和 window - 没问题。但是当你有一个标记指令并且只想显示一个窗口时，你就会遇到一个问题 - 窗口位置不在标记之上，你需要稍微改变位置。怎么做？让我分享一下我的经验。

您只需要为 windowoptions指定pixelOffset ，如下所示：

JS：

$scope.windowOptions = {
    pixelOffset : {
        height: -25,
        width: 0
    }
};

HTML：

<ui-gmap-window coords='selectedmarker.coords' show='true'  options='windowOptions'>
@{{ selectedmarker.tagline }}
</ui-gmap-window>

而已。根据您的需要更改高度。

于 2016-08-05T07:49:08.303 回答
0

您最好在单击时在示波器上设置标记模型，如下所示：

标记点击回调：

$scope.onClick = function(marker) {
  $scope.selectedMarker = marker.model;
}

然后在指令中使用 selectedMarker：

<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
            <div>Hello</div>
        </ui-gmap-window>

简单的。假设您的标记模型具有经度和纬度的原因

于 2015-03-11T22:25:28.963 回答