谷歌地图 – FusionTablesLayer到多边形

我正在使用Google Maps API和jquery-ui-maps（这个问题与插件无关，而且效果很好）。

我和莫桑比克以外的所有国家都创建了FusionTablesLayer。 用户可以放置标记并重新定位。 如果他试图将标记放在莫桑比克以外（通过FusionTablesLayer），我正试图找到一种方法来阻止阻力（或警告用户，现在无关紧要）。

经过一些研究后，我发现了这个方法： containsLocation（point：LatLng，polygon：Polygon） ，它计算给定点是否位于指定的多边形内。

它应该收到一个Polygon，我有一个FusionTablesLayer 。 有任何线索如何解决这个问题？

这是我的代码： FIDDLE

尝试放置标记并拖动它…

//Initialize the map var mapa = $('#map_canvas').gmap({'center': '-18.646245,35.815918'}); $('#map_canvas').gmap('option', 'zoom', 7); //create the layer (all countries except Mozambique) var world_geometry; $('#map_canvas').gmap().bind('init', function(event, map) { world_geometry = new google.maps.FusionTablesLayer({ query: { select: 'geometry', from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk', where: "ISO_2DIGIT NOT EQUAL TO 'MZ'" }, styles: [{ polygonOptions: { fillColor: "#333333", fillOpacity: 0.3 } }], map: map, suppressInfoWindows: true }); }); $('#map_canvas').gmap().bind('init', function(event, map) { $(map).click(function(event) { $('#map_canvas').gmap('clear', 'markers'); $('#map_canvas').gmap('addMarker', { 'position': event.latLng, 'draggable': true, 'bounds': false }, function(map, marker) { }).dragend(function(event) { //I need to check if the marker is over the FusionTablesLayer and block the drag. //var test = google.maps.geometry.poly.containsLocation(event.latLng, world_geometry); }).click(function() { }) }); }); 

Answer 1

由于FusionTablesLayer中没有containsLocation ，并且因为不支持鼠标事件而且支持点击（这会使它变得容易得多） – 没有其他方法可以检查是否有被拖出区域本身，莫桑比克 – 没有FusionTablesLayer。 解决方案是为莫桑比克创建一个不可见的多边形，并在完成拖动时使用该多边形检查containsLocation 。

多边形可以基于您排除的行中的KML， MZ 。 这可以使用google.visualization.Query来完成。

1）在项目中包含Google API加载器：

2）初始化可视化：

 google.load('visualization', '1.0'); 

3）为保持莫桑比克边界的多边形定义一个变量：

 var mozambique; 

以下是加载莫桑比克几何数据的函数，然后在地图上创建一个不可见的多边形; 使用google.visualization.Query代替自动化FusionTablesLayer，因此我们可以从KML中提取并将它们用作多边形的基础。

在基本的，这是如何将KML数据从FusionTable转换为多边形：

 function initMozambique(map) { //init the query string, select mozambique borders var sql = encodeURIComponent("SELECT 'geometry' FROM 1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk WHERE ISO_2DIGIT ='MZ'"); var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql); query.send(function (response) { var data = response.getDataTable().getValue(0, 0); //create a XML parser if (window.DOMParser) { var parser = new DOMParser(); var kml = parser.parseFromString(data, "text/xml"); } else { // Internet Explorer var kml = new ActiveXObject("Microsoft.XMLDOM"); kml.loadXML(data); } //get the coordinates of Mozambique var latLngs = kml.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue.split(' '); //create an array of LatLngs var mzLatLngs = []; for (var i = 0; i < latLngs.length; i++) { var latLng = latLngs[i].split(','); // for this FusionTable comes in lng,lat format mzLatLngs.push(new google.maps.LatLng(latLng[1], latLng[0])); } //initialize the mozambique polygon mozambique = new google.maps.Polygon({ paths: mzLatLngs, fillColor: 'transparent', strokeColor : 'transparent', map: map }); //make the mozambique polygon "transparent" for clicks (pass clicks to map) google.maps.event.addListener(mozambique, 'click', function(event) { google.maps.event.trigger(map, 'click', event); }); }); } 

在你的第二个gmap().bind('init'...调用上面的initMozambique函数initMozambique gmap().bind('init'... ：

 $('#map_canvas').gmap().bind('init', function(event, map) { initMozambique(map); ... 

现在，您可以在拖动后检查containsLocation的莫桑比克多边形

 ... }).dragend(function(event) { if (!google.maps.geometry.poly.containsLocation(event.latLng, mozambique)) { alert('You are not allowed to drag the marker outside Mozambique'); } //I need to check if the marker is over the FusionTablesLayer and block the drag. //var test = google.maps.geometry.poly.containsLocation(event.latLng, world_geometry); }).click(function() { }) ... 

看看分叉小提琴，上面代码的工作演示 – > http://jsfiddle.net/yb5t6cw6/

在Chrome，FF和IE，ubuntu和windows中测试过。