Angular-google-maps：圓形對象點擊事件，如何在點擊事件中向控制器發送信息？

Question

我正在嘗試設置角度 - 谷歌地圖 - 顯示。我有我使用對象作爲標記型號如下：

<ui-gmap-google-map center='map.center' zoom='map.zoom'> 
    <ui-gmap-markers 
    models="myObjects" 
    coords="'self'" 
    icon="'icon'" 
    idkey="'id'" 
    click="mapPinClick"> 
    </ui-gmap-markers> 
</ui-gmap-google-map> 

，並以圖標我目前使用的橙色圓圈png格式顯示在地圖上選定的對象。這種方法的優點：

• 由於「模型」屬性，單擊事件發送，我可以在我的控制器易於使用的模型。

• 我打算在某些時候添加自定義羣集功能，並且該指令似乎提供了直接支持（雖然很小）。

缺點：

• 當放大和縮小，圖標彼此重疊。

• 標記位置略高於實際座標，就像默認的Google地圖標記一樣。我希望他們在我的對象的確切座標上。

作爲一種變通方法，我嘗試使用谷歌地圖圈：

<ui-gmap-google-map center='map.center' zoom='map.zoom'> 
    <ui-gmap-circle 
    ng-repeat="object in myObjects" 
    radius="15" 
    stroke="{color: '#DF6C0A', weight: 1, opacity: 1.0}" 
    fill="{color: '#DF6C0A', opacity: 0.8}" 
    center="{latitude: object.latitude, longitude: object.longitude}" 
    events="{ click: mapPinClick }" 
    clickable=true> 
    </ui-gmap-circle> 
</ui-gmap-google-map> 

用這種方法，利弊似乎上下顛倒：根據縮放級別和他們的圓圈大小尺度'準確定位，但我無法像以前的方法那樣訪問object的模型屬性，並且我擔心使用此方法可能會更難實現集羣功能。

由於集羣事件並不在我的優先考慮範圍之內，所以如果我能以某種方式通過點擊事件向我的控制器傳輸有關object的信息，我很樂意使用循環方法。我想包括像

customAttribute="object.information" 

和執行console.log（）的自定義屬性：荷蘭國際集團所有附帶的點擊事件，看看屬性將包括在其中的一個參數，但它沒有顯示在了所有。我也試圖包括對象作爲click事件的參數像

events="{ click: mapPinClick(object) }" 

但最終不知何故遍地呼喚點擊功能又基本上崩潰我的應用程序。

任何有關如何從這裏繼續的建議將不勝感激。

Answer 1

現在可能已經解決了這個問題，但今天我遇到了這個問題，所以我想我會分享我是如何解決它的。

問題是Google地圖事件偵聽器不會返回對原始對象的引用。

爲了讓click事件與對象進行交互，您需要使用事件偵聽器對象實例化對象。像下面這樣：

var vm = this; 
vm.myObjects = []; 
var newObj = {}; 
var sum = 0; 

function logIdx() { 
    console.log(newObj.idx); 
    sum += newObj.idx; 
    console.log(sum); 
} 

for(var i=1; i<25; i++) { 

    newObj = { 
    idx: i, 
    events: { 
     click: logIdx 
    } 
    }; 

    vm.myObjects.push(newObj); 

} 

注意，newObj.events PARAMATERS的名稱相匹配的谷歌地圖事件偵聽器的名稱。

在你的HTML，那麼您需要做到以下幾點：

<ui-gmap-google-map center='vm.map.center' zoom='vm.map.zoom'> 
    <ui-gmap-circle 
    ng-repeat="object in vm.myObjects" 
    radius="15" 
    stroke="{color: '#DF6C0A', weight: 1, opacity: 1.0}" 
    fill="{color: '#DF6C0A', opacity: 0.8}" 
    center="{latitude: object.latitude, longitude: object.longitude}" 
    events="object.events" 
    clickable=true> 
    </ui-gmap-circle> 
</ui-gmap-google-map> 

我建議移動儘可能多的邏輯，你可以出的HTML，並把它在你的JS。例如，您可以將整個center對象放在myObjects對象內。