2016-05-31 55 views
0

我有一個簡單的地圖,我畫了一些多邊形。然後我想要捕獲用戶是否點擊一個多邊形 - 並獲取該多邊形的句柄(例如,通過多邊形的自定義ID或類似的)。如何獲取iOS中ti.map中單擊的多邊形?

我使用這樣的代碼添加多邊形:

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

其中points是緯度/經度的對象的陣列。我已經註冊了一個單擊處理程序:

mapView.addEventListener('click',clickHandler); 

...它的定義是這樣的:

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); 
} 

的點擊處理程序觸發一次我在多邊形內單擊(當然,更正確地被觸發無論哪裏在地圖上我點擊)。這可以。但是,在iOS上,我無法識別用戶點擊了哪個多邊形。輸出看起來是這樣的:

[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 

在Android上我得到了我想要的:

[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 

id真的足以讓我得到的相關數據(並能夠顯示用戶多一些有關該地區的詳細信息)。

我試圖將事件處理程序添加到多邊形 - 但它不工作(和真的我想用一個全球事件偵聽器,如上面的例子)。

我覺得我還沒有嘗試過的唯一的事情是嘗試根據GPS點來計算我在裏面的多邊形......我不是很擅長這樣的幾何算術 - 所以想不要這樣下去如果可能的話; - )

任何好主意?

在此先感謝!

編輯:

忘了提...平臺

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

/約翰

回答

0

您可以使用e.shape.title

我做它是這樣的:

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

我不記得什麼是可用的e.shape,但我猜你應該能夠找到一個ID,或別的東西,以確定您的多邊形。

+0

謝謝!這樣可行。我可以在多邊形上添加自己的屬性,這樣就可以很容易地找到合適的處理方法:-)我找到了另一種解決此問題的方法。我使用'Turf'來處理地理數據 - 並用它來確定一個點是否在其中一個多邊形內。但是這更清潔;-) –