谷歌地图 - FusionTablesLayer到Polygon

Question

我使用的是Google Maps API和jquery-ui-maps（这个问题与插件工作得很好）无关。

我已经创建了除莫桑比克以外的所有国家的FusionTablesLayer。用户可以放置一个标记并重新定位它。如果他试图将标记置于莫桑比克之外（通过FusionTablesLayer），我试图找到一种方法来阻止拖拽（或提醒用户，现在无关紧要）。

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

它应该收到一个多边形，我有一个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，并且因为没有mouseevents但点击支持（这将使得它更容易） - 没有其他方式比检查是否有被拖拽外部该地区本身，莫桑比克 - 不是到 FusionTablesLayer。解决方案是为莫桑比克创建一个不可见的多边形，并在拖动完成后使用该多边形检查containsLocation。

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

1）在项目中包含了谷歌API装载机：）

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

3定义为多边形的变量持有莫桑比克边境的：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

2）初始化可视化

var mozambique; 

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

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

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(','); 
      //<coordinates> 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); 
     }); 
    }); 
} 

呼叫上述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和窗户。