我如何通过从UI的GMAP窗口信息窗口/标记的UI SREF值？ [英] How do I pass a value from a ui-gmap-windows InfoWindow/Marker to ui-sref?

问题描述

我想创建一个谷歌地图的信息窗口里面的链接，使用角谷歌，地图模块的 UI-GMAP窗口。

I am trying to create a link inside an InfoWindow on a Google Map, using the angular-google-maps module's ui-gmap-windows.

在我的HTML模板，我有：

In my HTML template, I have:

<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;
});

注意我使用了控制器语法，因此 vm.markers 在控制器中显示为 main.markers 在HTML模板。

Note that I'm using the 'controller as' syntax, so the vm.markers in the controller appears as main.markers in the html template.

我看到的问题是，数据-UI-SREF =显示（{ID：ID}） HTML中的状态改变为显示页面，但不推动通过 ID 为$ stateParams值，这显然是不好的，因为我不知道是什么显示..

The problem I'm seeing is that the data-ui-sref="display({id: id})" in the html changes the state to the 'display' page, but does not push through the id as a $stateParams value, which is obviously not good, as I won't know what to display..

我有另一个链接到同一页面，信息窗口之外创建（在结果列表），并在确实推动通过id的值：

I have another link to the same page, created outside the InfoWindow (in a list of results), and the does push through the id value:

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

任何帮助以获取信息窗口的链接工作会非常多AP preciated。

Any help with getting the InfoWindow's link working will be very much appreciated.

推荐答案

下面是我如何结束了解决这个问题的基础上，<一发现信息href=\"https://github.com/angular-ui/angular-google-maps/issues/884\">https://github.com/angular-ui/angular-google-maps/issues/884

Here is how I ended up solving this issue, based on info found in https://github.com/angular-ui/angular-google-maps/issues/884 :

我创建了信息窗口模板，单独的控制器，并改变了我的HTML：

I created a template and separate controller for the InfoWindow, and changed my HTML to:

<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

在主控制器，I饲料中的信息，我需要为模板：

In the main controller, I feed in the info I need for the template:

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

在信息窗口的模板，我有：

In the InfoWindow's template, I have:

<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本身是pretty很多空的：

The infowindowTemplateController itself is pretty much empty:

(function(){
    'use strict';

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

         infowindowTemplateController.$inject=['$scope'];
         function infowindowTemplateController ($scope) {
         }
})();

这篇关于我如何通过从UI的GMAP窗口信息窗口/标记的UI SREF值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！