7

我正在尝试使用 angular-google-maps 模块的ui-gmap-windows.

在我的 HTML 模板中，我有：

<ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'>
     <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true">
         <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
             <div class="mapinfowindow" data-ui-sref="display({id: id})">                                                                      
                 <span class="itemname" data-ng-non-bindable>{{ title }}</span>
             </div>
         </ui-gmap-windows>
     </ui-gmap-markers>
 </ui-gmap-google-map>

在我的控制器中，我有：

uiGmapGoogleMapApi.then(function(maps) {
  vm.itemlist = search.getItemList();                                                                                                                   
  var markers = [];
  _.each(vm.itemlist,function(item){
    search.getGeometry(item.href).then(function(marker) {
      marker.title      = item.en;
      marker.id         = item.href;
      marker.showWindow = false;
      marker.options    = {
                            title: item.en,
                            icon: markericon.normal
                          };
      marker.onClick    = function() { vm.markerClick(marker); };
      marker.closeClick = function() { vm.markerCloseClick(marker); };
      markers.push(marker);
    });
  });
  vm.markers = markers;
});

请注意，我使用的是“controller as”语法，因此vm.markers控制器main.markers中的 html 模板中的显示。

我看到的问题是data-ui-sref="display({id: id})"html 中的 将状态更改为“显示”页面，但没有将其id作为 $stateParams 值推送，这显然不好，因为我不知道要显示什么。 .

我有另一个指向同一页面的链接，在 InfoWindow 之外创建（在结果列表中），并且确实通过了 id 值：

<div data-ng-repeat="entry in main.itemlist">
    <div data-ui-sref="display({id: entry.id})">

任何有关使 InfoWindow 链接正常工作的帮助将不胜感激。

4

3 回答 3

12

根据https://github.com/angular-ui/angular-google-maps/issues/884中的信息，这是我最终解决此问题的方法：

我为 InfoWindow 创建了一个模板和单独的控制器，并将我的 HTML 更改为：

<ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'>
    <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true">
        <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" templateUrl="'templateUrl'" templateParameter="'templateParameter'" ng-cloak>
        </ui-gmap-windows>
    </ui-gmap-markers>
</ui-gmap-google-map>

如您所见，现在有两个新参数：templateUrl和templateParameter。

在主控制器中，我输入模板所需的信息：

...
marker.templateUrl = templateUrl;
marker.templateParameter = {
                             id:    item.id,
                             title: item.name,
                             href:  item.href,
                             img:   vm.lookup_extphoto[item.href] //getting a photo externally
                            };
...

在 InfoWindow 的模板中，我有：

<div data-ng-controller="infowindowTemplateController">
    <div class="mapinfowindow" data-ui-sref="display({id: parameter.id})">
        <div class="previewimage-container">
            <img data-ng-attr-src="{{:: parameter.img }}">
        </div>
        <span>{{:: parameter.title }}</span>
    </div>          
</div>

infowindowTemplateController 本身几乎是空的：

(function(){
    'use strict';

     angular
         .module('myapp')
         .controller('infowindowTemplateController', infowindowTemplateController);

         infowindowTemplateController.$inject=['$scope'];
         function infowindowTemplateController ($scope) {
         }
})();
于 2014-12-05T18:22:10.757 回答
2

如果id在作用范围内绝对可用，.mapinfowindow您可以尝试：

<div class="mapinfowindow" data-ui-sref="display({id: '{{id}}'})">

（来源：https ://github.com/angular-ui/ui-router/issues/395#issuecomment-59136525 ）

如果这不起作用，您可能需要一个自定义指令。

于 2014-12-05T10:18:26.297 回答
2

用于$parent获取值。

模板：

<ui-gmap-marker ng-repeat="marker in markers"
                   coords="marker.coords">
    <ui-gmap-window ng-cloak>
        <a ui-sref="details({ id : $parent.marker.id })">Go!</a>
    </ui-gmap-window>
</ui-gmap-marker>

控制器：

for (var i = 0; i < mArray.length; i++) {
    var marker = {
        id            : mArray[i]._id,
        coords        : {
            latitude  : mArray[i].address.latitude,
            longitude : mArray[i].address.longitude
        }
    };
    $scope.markers.push(marker);
}
于 2015-06-30T15:41:33.857 回答