Как реализовать кликабельные окна на маркерах с помощью Angular Google Maps?

Question

Я попробовал это в любом случае, и до сих пор не повезло. Пожалуйста, потерпите меня, я дизайнер по профессии.

Я создал Плункер, где я до сих пор.

Я использую 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 без этой ошибки:

   Msgstr "Возможно, необработанная ошибка: ошибка внутри итератора фрагментирования: ошибка: [jqLite:nosel] Поиск элементов с помощью селекторов не поддерживается jqLite!"

   <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-адрес шаблона (частичное имя может быть не лучшим в названии...). Также обратите внимание, что у меня есть свойство под названием 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>

О, и я тоже плачу, когда читаю документацию...