如何使用Angular Google Maps在標記上實現可點擊的窗口？

Question

我已經嘗試過這種方式，仍然沒有運氣。請耐心等待，我是一位貿易設計師。

我創建了一個Plunker我到目前爲止的地方。

我使用Angular Google Maps來創建一個我想輸出標記的地圖，點擊其中一個將打開它的信息窗口。在每個信息窗口中，我希望有一些互動內容，例如按鈕，鏈接，步操樂隊等

我的問題是多方面的：

1. 當我把這些變量的標籤沒有任何內部的信息窗口的HTML顯示，除非NG-非綁定放置在父母身上。但是，我希望內容是互動的。正如你在我的代碼中看到的那樣，按鈕什麼也不做。

   <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沒有這個錯誤：

   "Possibly unhandled Error: error within chunking iterator: Error: [jqLite:nosel] Looking up elements via selectors is not supported by 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 -directive看起來像這樣：

<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> 

哦，我也哭了以及閱讀文檔時......