Google Maps-FusionTablesLayer到多边形 [英] Google Maps - FusionTablesLayer to Polygon
问题描述
我正在使用Google Maps API和jquery-ui-maps(此问题与运行良好的插件无关).
I'm using Google Maps API and jquery-ui-maps (this questions has nothing to do with the plugin which is working great).
我已经与除莫桑比克以外的所有国家/地区创建了FusionTablesLayer.用户可以放置一个标记并重新放置它.我正在尝试寻找一种方法来阻止拖动(或提醒用户，现在无关紧要)，如果他尝试将标记放置在莫桑比克之外(通过FusionTablesLayer).
I've created a FusionTablesLayer with all countries except Mozambique. The user could place a marker and reposition it. I'm trying to find a way to block the drag (or alert the user, it doesn't matter now) if he tries to place the marker outside Mozambique (over the FusionTablesLayer).
经过研究，我发现了这种方法: containsLocation(point:LatLng，多边形:多边形)，它计算给定点是否位于指定的多边形内.
After some research I discover this method: containsLocation(point:LatLng, polygon:Polygon), which computes whether the given point lies inside the specified polygon.
它应该收到一个多边形，并且我有一个FusionTablesLayer .有什么线索可以解决这个问题吗?
It should receive a Polygon and I've got a FusionTablesLayer. Any clue how to solve this?
这是我的代码: FIDDLE
Here's my code:FIDDLE
尝试放置标记并将其拖动...
Try to place a marker and drag it...
//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() {
})
});
});
推荐答案
由于FusionTablesLayer中没有containsLocation，并且由于不支持mouseevents，但click也受支持(这会使事情变得容易得多)-没有其他选择莫桑比克，而不是将其拖入FusionTablesLayer，而不是检查该区域本身是否在该区域之外.解决方案是为莫桑比克创建一个不可见的多边形，并在拖动完成后使用该多边形检查containsLocation.
Since there is no containsLocation in FusionTablesLayer, and since no mouseevents but click is supported (that would have made it a lot easier) - there is no other way round than to check if there is being dragged outside the area itself, Mozambique - not into the FusionTablesLayer. The solution is to create an invisible polygon for Mozambique, and use that polygon to check for containsLocation when dragging is finished.
多边形可以基于您要排除的行MZ中的KML.可以使用 google.visualization.Query .
The polygon can be based on the KML from the row you are excluding, MZ. That can be done using google.visualization.Query.
1)在您的项目中包括Google API加载器:
1) include the Google API loader in your project :
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
2)初始化可视化:
google.load('visualization', '1.0');
3)为包含莫桑比克边界的多边形定义一个变量:
3) define a variable for the polygon holding the Mozambique borders :
var mozambique;
以下是一个函数，该函数加载莫桑比克的几何数据，然后在地图上创建一个不可见的多边形； google.visualization.Query代替了自动FusionTablesLayer，因此我们可以从KML中提取<coordinates>并将其用作多边形的基础.
The following is a function that loads the geometry data for Mozambique, and then creates an invisible polygon on the map; google.visualization.Query is used instead of the automated FusionTablesLayer so we can extract the <coordinates> from the KML and use them as base for the polygon.
从根本上讲，这是将KML数据从FusionTable转换为多边形的方法:
In basic, this is how to convert KML-data from a FusionTable to a polygon :
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函数:
Call the above initMozambique function in your second gmap().bind('init'... :
$('#map_canvas').gmap().bind('init', function(event, map) {
initMozambique(map);
...
现在，您可以在拖动后检查containsLocation的莫桑比克多边形
Now you can check the mozambique-polygon for containsLocation after dragging
...
}).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 /
See forked fiddle, working demo with the code above -> http://jsfiddle.net/yb5t6cw6/
在Chrome，FF和IE，ubuntu和Windows中进行了测试.
Tested in Chrome, FF and IE, ubuntu and windows.
这篇关于Google Maps-FusionTablesLayer到多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
