2016-05-31 14 views
0

Ich habe eine einfache Karte, wo ich einige Polygone zeichne. Dann möchte ich erfassen, ob der Benutzer auf ein Polygon klickt und ein Handle für dieses Polygon erhält (z. B. durch eine benutzerdefinierte ID des Polygons oder ähnliches).Wie kann ich das Polygon in ti.map auf iOS aktivieren?

ich Code wie folgt um das Polygon hinzuzufügen:

var poly = Map.createPolygon({ 
     points : points, 
     id : 'poly', 
     fillColor : '#55ec858f', 
     strokeColor : 'black', 
     strokeWidth : 2 
    }); 
    mapView.addPolygon(poly); 

wo points ist ein Array von Breite/Länge Objekte. Ich habe einen Click-Handler registriert:

mapView.addEventListener('click',clickHandler); 

... und es ist wie folgt definiert:

function clickHandler(e){ 
    console.log("click: id=" + e.source.id + ", source=" + JSON.stringify(e.source)); 
    console.log("click: clicksource=" + e.clicksource + ", latitude=" + e.latitude + ", longitude=" + e.longitude); 
} 

Der Click-Handler einmal ausgelöst wird, ich innerhalb des Polygons klicken (na ja, richtiger es ausgelöst wird, wo auch immer auf der Karte Ich klicke). Das ist in Ordnung. Unter iOS kann ich jedoch nicht feststellen, auf welches der Polygone der Benutzer geklickt hat. Die Ausgabe sieht wie folgt aus:

[INFO] : click: id=undefined, source={"horizontalWrap":true,"visible":true,"mapType":1,"rotateEnabled":false,"region":{"longitudeDelta":0.010248234495520592,"latitudeDelta":0.009999999776482582,"longitude":11.154247283935547,"latitude":55.55887985229492}} 
[INFO] : click: clicksource=polygon, latitude=55.55712556278878, longitude=11.154479577247997 

Auf Android Ich bekomme, was ich will:

[INFO] : click: id=poly, source={"fillColor":"#55ec858f","strokeColor":"black","points":[{"latitude":55.563299,"longitude":11.157998},{"latitude":55.562731,"longitude":11.157987},{"latitude":55.562719,"longitude":11.158029},{"latitude":55.562648,"longitude":11.158027},{"latitude":55.562153,"longitude":11.157851},{"latitude":55.561301,"longitude":11.157834},{"latitude":55.561088,"longitude":11.157913},{"latitude":55.560212,"longitude":11.157896},{"latitude":55.560106,"longitude":11.157935},{"latitude":55.559751,"longitude":11.157928},{"latitude":55.559515,"longitude":11.157882},{"latitude":55.559267,"longitude":11.157731},{"latitude":55.559184,"longitude":11.15775},{"latitude":55.559018,"longitude":11.15783},{"latitude":55.558899,"longitude":11.157953},{"latitude":55.558686,"longitude":11.157928},{"latitude":55.558604,"longitude":11.157864},{"latitude":55.558391,"longitude":11.157859},{"latitude":55.558143,"longitude":11.157834},{"latitude":55.557694,"longitude":11.157804},{"latitude":55.557233,"longitude":11.15769},{"latitude":55.556985,"longitude":11.157623},{"latitude":55.556678,"longitude":11.157513},{"latitude":55.556266,"longitude":11.157317},{"latitude":55.556041,"longitude":11.157291},{"latitude":55.555828,"longitude":11.157245},{"latitude":55.555592,"longitude":11.157157},{"latitude":55.555144,"longitude":11.156961},{"latitude":55.554779,"longitude":11.156786},{"latitude":55.554507,"longitude":11.156677},{"latitude":55.554401,"longitude":11.156675},{"latitude":55.554366,"longitude":11.156632},{"latitude":55.554385,"longitude":11.156451},{"latitude":55.554447,"longitude":11.155964},{"latitude":55.554525,"longitude":11.155484},{"latitude":55.554621,"longitude":11.155014},{"latitude":55.554733,"longitude":11.154556},{"latitude":55.554862,"longitude":11.154111},{"latitude":55.555005,"longitude":11.153681},{"latitude":55.555164,"longitude":11.153268},{"latitude":55.555337,"longitude":11.152873},{"latitude":55.555524,"longitude":11.152498},{"latitude":55.555724,"longitude":11.152145},{"latitude":55.555936,"longitude":11.151815},{"latitude":55.556159,"longitude":11.151509},{"latitude":55.556393,"longitude":11.151228},{"latitude":55.556636,"longitude":11.150974},{"latitude":55.556887,"longitude":11.150747},{"latitude":55.557147,"longitude":11.150549},{"latitude":55.557412,"longitude":11.150379},{"latitude":55.557684,"longitude":11.15024},{"latitude":55.557959,"longitude":11.150131},{"latitude":55.558238,"longitude":11.150053},{"latitude":55.55852,"longitude":11.150006},{"latitude":55.558802,"longitude":11.14999},{"latitude":55.559084,"longitude":11.150006},{"latitude":55.559366,"longitude":11.150053},{"latitude":55.559645,"longitude":11.150131},{"latitude":55.55992,"longitude":11.15024},{"latitude":55.560192,"longitude":11.150379},{"latitude":55.560457,"longitude":11.150549},{"latitude":55.560717,"longitude":11.150747},{"latitude":55.560968,"longitude":11.150974},{"latitude":55.561211,"longitude":11.151228},{"latitude":55.561445,"longitude":11.151509},{"latitude":55.561668,"longitude":11.151815},{"latitude 
[INFO] : click: clicksource=polygon, latitude=55.55844486621942, longitude=11.154376566410065 

Die id ist wirklich genug für mich die relevanten Daten zu erhalten (und der Lage sein, den Benutzer etwas mehr zeigen Details über die Gegend).

Ich habe versucht, einen Ereignishandler zu dem Polygon hinzufügen - aber es funktioniert nicht (und wirklich Ich würde ein globalen Ereignis-Listener, wie im Beispiel oben verwendet werden soll).

Ich denke, das einzige, was ich noch nicht ausprobiert habe, ist zu versuchen, zu berechnen, welches Polygon ich bin basierend auf den GPS-Punkten ... Ich bin nicht wirklich gut in solchen geometrischen Arithmetik - so möchte ich nicht hinunter gehen Straße wenn möglich ;-)

Irgendwelche guten Ideen?

Vielen Dank im Voraus!

Edited:

vergessen Plattform zu erwähnen ...

Appc CLI 5.1.0 
Studio: 4.4.0 
ti.map: 2.3.6 (Android) 
ti.map: 2.5.2 (iOS) 

/John

Antwort

0

können Sie verwenden e.shape.title

ich tun es ist so:

map.addEventListener('click', function(e) { Ti.API.info('You clicked ' + JSON.stringify(e.shape.title)); });

Ich kann mich nicht erinnern, was auf dem e.shape verfügbar ist, aber ich denke, sollten Sie in der Lage sein, eine ID zu finden, oder etwas anderes Ihr Polygon zu identifizieren.

+0

Danke! Das funktioniert. Ich kann meine eigenen Eigenschaften auf dem Polygon hinzufügen, so dass es einfach ist, den richtigen Griff zu bekommen :-) Ich hatte eine andere Lösung gefunden, um das Problem zu umgehen. Ich benutze 'Turf', um mit den Geo-Daten zu arbeiten - und habe das verwendet, um herauszufinden, ob sich ein Punkt in einem der Polygone befindet. Aber das ist sauberer ;-) –