2016-05-31 53 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'来处理地理数据 - 并用它来确定一个点是否在其中一个多边形内。但是这更清洁;-) –