如何在 iOS 上的 ti.map 中点击多边形?

How can I get the polygon clicked on in ti.map on iOS?

我有一张简单的地图,我在其中绘制了一些多边形。然后我想捕获用户是否单击多边形 - 并获取该多边形的句柄(例如,通过多边形或类似的自定义 ID)。

我使用这样的代码来添加多边形:

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

其中 points 是 latitude/longitude 个对象的数组。我已经注册了一个点击处理程序:

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 真的足够我获取相关数据(并且能够向用户展示有关该区域的更多详细信息)。

我试图向多边形添加一个事件处理程序 - 但它不起作用(真的我想使用 one 全局事件侦听器,如上例所示)。

我认为我唯一没有尝试过的是尝试根据 GPS 点计算我在哪个多边形内...我不太擅长这种几何运算 - 所以不想下去如果可能,那条路 ;-)

有什么好主意吗?

提前致谢!

已编辑:

忘了说平台...

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

/约翰

您可以使用e.shape.title

我是这样做的:

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

我不记得 e.shape 上有什么可用的,但我想你应该能够找到一个 ID 或其他东西来识别你的多边形。