2013-04-19 11 views
5

ho biforcato direttiva uiMap di AngularUI al fine di scambiare InfoWindow per finestra informazioni e di aggiungere MarkerClusters. Ho apportato alcuni aggiornamenti completi a uiMap -> icMap; in particolare ho spostato la logica direttiva dai controller, rendendo uiMap la direttiva "master"). Ho quasi tutto funzionante, tranne che facendo clic su un MapMarker nativo non apri la finestra delle informazioni.AngularJS: Evento callback non funzioni su Google Maps mappa nativa marcatore

io penso il motivo è che non sto correttamente vincolante l'evento click al MapMarker nativo (ic-map.js: 163).

Prima di riorganizzare uiMap, ho semplicemente aggiunto una direttiva icMapInfoBox in map.js. La sua aperto evento è stato registrato/innescata da:

ui-event="{'map-click':'openMarkerInfo(marker)'}" 

che chiama openMarkerInfo() definito nel suo controllore (copia/incolla dal mio repo: GitHub Gist).

Tuttavia, ora quando faccio clic su un MapMarker nativo, non accade nulla e non ottengo errori nella console (ma tutti gli altri eventi continuano a funzionare correttamente).

originali Plunk
semplificato Plunk (MarkerClusters rimossi)
In entrambi i plunks, il problema risiede probabilmente nel ic-map.js (primo file della lista)

map.json è un file di dati
angular.js, angular-ui.js e infobox.js sono file lib

Modifica ho notato che è InfoBox.mapundefined; Immagino che abbia qualcosa a che fare con il problema.

Modifica La proprietà InfoBox.map indefinita era parte del problema: la chiamata manuale per InfoBox.open su IC-map.js: 189 opere (modello non è in fase di compilazione, ma questa è una problema diverso), ma l'evento click non si attiva ancora InfoBox.open. Anche il modello non viene incluso.

RISOLTO: Ho trattato un oggetto DOM anziché solo un oggetto js. Pubblicherà presto una soluzione.

+0

Fornire un jsFiddle con tutti i file. – tschiela

+0

@tschiela, ho già fornito un Plunkr con tutti i file (è collegato in fondo alla domanda). Oggi Plunkr sembra un po 'lento, quindi ci vogliono alcuni secondi per caricarlo. – jacob

+0

oh scusa ho fatto scivolare quel link. thx – tschiela

risposta

1

esempio di lavoro: http://plnkr.co/edit/mamx5EXtHxSo4aqMSZUd

  1. originale> IC-map.js: 156 mio listener di eventi avrebbe dovuto essere legato con google.maps.event.addListener() (vedi Esempio di lavoro> ic-map.js: 154-156).
  2. Inoltre, era troppo difficile utilizzare i modelli, quindi ho aggiunto 2 div come figli di div#map (vedere Esempio di lavoro> index.html: 41-42). A causa del funzionamento dell'ereditarietà e dei modelli condivisi, tutte le direttive DEVONO essere sullo stesso elemento DOM (perché nessuno può guardare in basso, solo su). Ciò è stato necessario per spostare la logica della direttiva fuori dallo controller (come era l'implementazione da AngularUI). Nella mia implementazione, il modello è condiviso tra le direttive icMaps * all'interno delle direttive (e directive controllers).
  3. Differenza di :
    • uiMapMarker, è fissato ad un oggetto DOM: ng-repeat="marker in markers"
    • icMapMarkers, è solo un oggetto js.
Problemi correlati