[英]How put FusionTablesLayer in Google Maps API using React JS?
[英]Google Maps - FusionTablesLayer to Polygon
我正在使用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() {
})
});
});
由於沒有containsLocation
在FusionTablesLayer會,並因為沒有mouseevents但點擊支持(這將使它輕松了許多) -有沒有其他的方式全面超越,以檢查是否有被拖動的區域本身,莫桑比克之外 -不進 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
函數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中測試過。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.