如何使用Angular Google Maps在标记上实现可点击窗口？

Question

我已经尝试了这一切,但仍然没有运气.请耐心等待,我是贸易设计师.

我创造了一个我到目前为止的Plunker.

我正在使用Angular Google Maps创建一个地图,我想在其上输出我的标记,单击其中一个将打开其信息窗口.在每个信息窗口中,我希望有一些互动内容,例如按钮,链接,游行乐队等

我的问题是多方面的:

1. 当我将信息窗口html放在标记内时,除非​​在父项上放置ng-non-bindable,否则不会显示任何变量.但是,我希望内容是交互式的.正如您将在我的代码中看到的那样,按钮什么都不做.

   <ui-gmap-windows show="show">
       <div class="markerwindow" ng-non-bindable>
           <h1>{{ title }}</h1>
           <p>{{ message }}</p>
           <footer>
               <a href="http://foo-bar.com">Google</a>
               <button click="buttonClick(id)">Button</button>
           </footer>
       </div>
   </ui-gmap-windows>
   

2. 在没有此错误的情况下,我无法使用templateUrl将模板分成单独的文件[我希望信息窗口最终非常重要]:

   "可能未处理的错误:分块迭代器中的错误:错误:[jqLit​​e:nosel] jqLit​​e不支持通过选择器查找元素!"

   <ui-gmap-windows show="show" templateUrl="templates/window.html">
   </ui-gmap-windows>
   

3. 最后,当我阅读文档时,我有时会哭泣...

有人可以帮我识别我的方法的问题吗？我真的很感激甚至是一片帮助,因为我现在真的很难在这个障碍上找到方法.

提前致谢.

Answer 1

该templateURL属性是标记对象上的属性.以下是我目前正在处理的一些代码:

function createMarkers(data) {
  $scope.markers = data.map(function(marker){
    var tags = marker.tags.map(function(tag){
      return {
        tag: tag.tag,
        url: tag.url
      }
    })
    return ({
      id: marker.id,
      latitude: marker.position.lat,
      longitude: marker.position.lng,
      info: {
        title: marker.item,
        description: marker.note,
        place: marker.position.place,
        tags: tags
      },
      template: "views/partials/main/gmapWindow.html"
    })
  })
}

正如您所看到的,我有一个名为template包含模板URL 的属性(partials可能不是最好的命名...).另请注意,我有一个名为info包含title和的东西的属性description.

我的指导ui-gmap-google-map看起来像这样:

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
    <ui-gmap-windows
      templateUrl="'template'"
      templateParameter="'info'"
      show="'showWindow'"
      closeClick="'closeClick'"
    ></ui-gmap-windows>
  </ui-gmap-markers>
</ui-gmap-google-map>

请注意,我同时使用",以及'在templateUrl和templateParameter.templateUrl是包含模板字符串的属性(这样我们可以为不同的标记使用不同的模板),templateParameter也是标记模型中的属性.该属性包含我们传递给模板的对象.

最后,我们可以创建我们的模板并访问我们传递给它的对象,在我的例子中info是 - 模型中属性的对象.

<div>
    <h3>{{ :: parameter.title }}</h3>
    <p><em>{{ :: parameter.description }}</em></p>
    <p><strong>{{ :: parameter.place }}</strong></p>
    <p class="muted">Tags: <tags marker="{{ :: parameter.tags }}" /></p>
</div>

哦,在阅读文档时我也哭了......