我正在使用 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() {
})
});
});
最佳答案
因为没有containsLocation
在 FusionTablesLayer 中,并且由于不支持鼠标事件,但支持单击(这会使它变得容易得多) - 除了检查是否有被拖到外区域本身之外,别无他法,莫桑比克 -而不是 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;
下面是一个函数,加载莫桑比克的几何数据,然后在 map 上创建一个不可见的多边形;使用 google.visualization.Query 而不是自动化的 FusionTablesLayer,因此我们可以提取 <coordinates>
来自 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(',');
//<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() {
})
...
参见 forked fiddle,上面代码的工作演示 -> http://jsfiddle.net/yb5t6cw6/
在 Chrome、FF 和 IE、ubuntu 和 windows 中测试。
关于javascript - 谷歌地图 - FusionTablesLayer 到多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21963944/