谷歌地图 - FusionTablesLayer 到多边形

Posted 2023-02-23

【中文标题】谷歌地图 - FusionTablesLayer 到多边形

【英文标题】：Google Maps - FusionTablesLayer to Polygon

【发布时间】：2014-03-24 17:02:02

【问题描述】：

我正在使用 Google Maps API 和 jquery-ui-maps（这个问题与运行良好的插件无关）。

我创建了一个包含除莫桑比克以外的所有国家/地区的 FusionTablesLayer。用户可以放置一个标记并重新定位它。如果他试图将标记放在莫桑比克之外（在 FusionTablesLayer 上方），我正在尝试找到一种方法来阻止拖动（或提醒用户，现在没关系）。

经过一番研究，我发现了这种方法：containsLocation(point:LatLng, 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() 
        )
    );
);

【参考方案1】：

由于在 FusionTablesLayer 中没有 containsLocation，并且由于不支持鼠标事件，但支持单击（这会使它更容易） - 除了检查是否有被拖到外面没有其他方法 莫桑比克地区本身 - 而不是 FusionTablesLayer。解决方案是为莫桑比克创建一个不可见的多边形，并在拖动完成时使用该多边形检查containsLocation。

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

1) 在您的项目中包含 Google API 加载器：

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

2) 初始化可视化：

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

3) 为包含莫桑比克边界的多边形定义一个变量：

var mozambique;

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

基本上，这是将 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(',');
            //<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);
        );
    );

在您的第二个gmap().bind('init'... 中调用上述initMozambique 函数：

$('#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() 
)
...

查看 fork fiddle，使用上述代码的工作演示 -> http://jsfiddle.net/yb5t6cw6/

在 Chrome、FF 和 IE、ubuntu 和 windows 中测试。

【讨论】：

我没有时间自己测试它，但它很有意义！谢谢你的详细回答。

@davidkonrad 但万一一个国家的多边形太多。我们该如何处理？

@QuỳnhNguyễn，感谢您向我指出这个旧答案。已更新fiddle，由于CDN 过时，旧的不再工作。我不确定，您想到的是哪个国家/地区？

@davidkonrad jsfiddle.net/srxnu8pc 这是我的融合表层。我正在尝试检查这些区域内部或外部的拖动标记。很抱歉，您的解决方案不适用于这种情况。因为我们无法查询NOT EQUAL...

@davidkonrad 我已经用geometry 数据尝试了Circle 的google.visualization.Query 和ST_INTERSECTS。但是由于查询太重，请稍等一下……您能理解吗？