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

时间:2016-05-31 13:35:58

标签: ios dictionary polygon appcelerator-titanium

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

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

    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)

/约翰

1 个答案:

答案 0 :(得分:0)

您可以使用e.shape.title

我这样做:

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

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