我有以下适用于FusionTable Layer的Google Maps代码。
它根据用户的缩放级别而改变。
数组draw_str和draw_str_zoom是动态的，并根据我们进行的API调用和收到的响应生成。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layerState = [];
var draw_str = '27089,27013,27053,27029,27035,27067,27081,27069,27155,27153,27131,27123,27109,27051,27043,27031,27027,27007,27005,27003,27001';
var draw_str_zoom = '48131,48197,48459,48497,48163,48379,48403,48471,48499,48505,48067,48249,48289,48323,48351,48399,48467,48481,48485,48507,48031,48139,48187,48303,48315,48355,48409,48419,48429,48483,48489,48021,48027,48035,48053,48099,48143,48145,48157,48195,48225,48251,48271,48317,48319,48361,48427,48431,48463,48479,48043,48155,48215,48321,48343,48381,48425,48451,48469,48079,48135,48347,48363,48407,48477,48085,48201,48299,48325,48339,48413,48453,48503,48177,48291,48401,48423,48475,48089,48439,48095,48117,48253,48275,48329,48397,48441,48465,48259,48279,48335,48437,48487,48003,48045,48061,48121,48161,48209,48245,48281,48313,48375,48395,48445,48457,48473,48491,48501,48449,48435,48415,48405,48391,48387,48373,48371,48357,48349,48345,48337,48331,48309,48307,48293,48285,48277,48273,48265,48257,48255,48241,48231,48227,48223,48221,48219,48217,48213,48193,48189,48185,48183,48181,48175,48171,48167,48153,48151,48149,48147,48141,48133,48123,48119,48115,48113,48105,48097,48093,48091,48087,48077,48073,48071,48063,48059,48057,48055,48051,48049,48047,48041,48039,48037,48029,48025,48019,48015,48009,48005';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 41.876, lng: -87.624}
});
layerState[0] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1fio1qgy5HkinUDKqYvREIlSoBaHjl2RBe3DLJa38'
},
options: {suppressInfoWindows: true},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}, {
where: "'GEO_ID2' IN (" + draw_str_zoom + ")",
polygonOptions: {
fillOpacity: 0.3
}
}]
});
layerState[0].setMap(map);
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom_level = map.getZoom();
if (zoom_level >= 6 && zoom_level < 7) {
clearRegion(zoom_level);
layerState[0] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1fio1qgy5HkinUDKqYvREIlSoBaHjl2RBe3DLJa38'
},
options: {suppressInfoWindows: true},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}, {
where: "'GEO_ID2' IN (" + draw_str + ")",
polygonOptions: {
fillOpacity: 0.3
}
}]
});
layerState[0].setMap(map);
}
});
function clearRegion(level) {
layerState.forEach(function(kml) {
kml.setMap(null);
});
}
}
// }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
Google Fusion Table下降了-https://support.google.com/fusiontables/answer/9185417
有没有一种方法可以在不使用FusionTable图层的情况下创建具有所有功能的相似地图？
答案 0 :(得分：2)
由于Fusion Tables在2019年12月3日之后将不可用，因此我建议：
将表格下载为KML文件， https://support.google.com/fusiontables/answer/2548807?hl=en
将KML文件托管在不需要身份验证即可访问的可公开访问的URL上。这是因为Maps JavaScript API使用Google托管服务来检索和解析KML文件以进行呈现。 https://developers.google.com/maps/documentation/javascript/kmllayer
最后，在Google地图和边栏中显示KML文件的信息。 https://developers.google.com/maps/documentation/javascript/kml
或者，您可以将KML文件托管在网页所在的域中，但是为此，您需要一个类似于GeoXML3的库：
存储库，下面的EDIT 1： https://github.com/geocodezip/geoxml3/tree/master/kmz
编辑1：使用GeoXML3，从draw_str开始的动态样式将是：
<div id="map"></div>
<script src="geoxml3.js"></script>
<script>
var draw_str = [/* your array */];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 41.876, lng: -87.624}
});
var myParser = new geoXML3.parser({map: map,zoom: false}); // zoom needs to be set to false to keep mapOptions intact.
myParser.parse('Counties.kml'); // our Document (myParser.docs[0]) is the only parsed kml
google.maps.event.addListener(map, 'zoom_changed', function () {
var polygonOptions = {fillColor: "#000000" , fillOpacity: 0.001};
var polygonOptionsID2 = {fillOpacity: 0.3};
var zoom_level = map.getZoom();
if (zoom_level >= 6 && zoom_level < 7) {
for (var i = 0; i < draw_str.length; i++) {
for (var j = 0; j < myParser.docs[0].placemarks.length; j++) {
if (draw_str[i] == myParser.docs[0].placemarks[j].vars.val.GEO_ID2) { // GEO_ID2 is stored as Extended Data for every placemark (myParser.docs[0].placemarks is an array with 3250 entries)
myParser.docs[0].gpolygons[j].setOptions(polygonOptionsID2); // myParser.docs[0].gpolygons is an array with 3250 polygons
} else {
myParser.docs[0].gpolygons[j].setOptions(polygonOptions);
}
}
}
}
});
}
</script>
由于从Fusion Tables下载的KML超过15 MB
EDIT2：使用draw_str和draw_str_zoom的全功能演示程序，取决于代码中引用了GeoXML3.js和从Fusion Table页面下载的KML。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="static/geoxml3.js"></script>
<script>
var draw_str = "27089,27013,27053,27029,27035,27067,27081,27069,27155,27153,27131,27123,27109,27051,27043,27031,27027,27007,27005,27003,27001";
var draw_str_zoom = "48131,48197,48459,48497,48163,48379,48403,48471,48499,48505,48067,48249,48289,48323,48351,48399,48467,48481,48485,48507,48031,48139,48187,48303,48315,48355,48409,48419,48429,48483,48489,48021,48027,48035,48053,48099,48143,48145,48157,48195,48225,48251,48271,48317,48319,48361,48427,48431,48463,48479,48043,48155,48215,48321,48343,48381,48425,48451,48469,48079,48135,48347,48363,48407,48477,48085,48201,48299,48325,48339,48413,48453,48503,48177,48291,48401,48423,48475,48089,48439,48095,48117,48253,48275,48329,48397,48441,48465,48259,48279,48335,48437,48487,48003,48045,48061,48121,48161,48209,48245,48281,48313,48375,48395,48445,48457,48473,48491,48501,48449,48435,48415,48405,48391,48387,48373,48371,48357,48349,48345,48337,48331,48309,48307,48293,48285,48277,48273,48265,48257,48255,48241,48231,48227,48223,48221,48219,48217,48213,48193,48189,48185,48183,48181,48175,48171,48167,48153,48151,48149,48147,48141,48133,48123,48119,48115,48113,48105,48097,48093,48091,48087,48077,48073,48071,48063,48059,48057,48055,48051,48049,48047,48041,48039,48037,48029,48025,48019,48015,48009,48005";
var draw_strArray = draw_str.replace(/, +/g, ",").split(",").map(Number);
var zoomArray = draw_str_zoom.replace(/, +/g, ",").split(",").map(Number);
var tempOptions = {fillColor: "#FFFF00", strokeColor: "#000000", fillOpacity: 0.9, strokeWidth: 10};
var geoXmlDoc;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 41.876, lng: -87.624}
});
var myParser = new geoXML3.parser({map: map,zoom: false, afterParse: useTheData });
myParser.parse('static/Counties.kml');
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom_level = map.getZoom();
if (zoom_level >= 6 && zoom_level < 7) {
for ( i = 0; i < draw_strArray.length; i++) {
for (var j = 0; j < geoXmlDoc.placemarks.length; j++) {
if (draw_strArray[i] == geoXmlDoc.placemarks[j].vars.val.GEO_ID2) {
geoXmlDoc.gpolygons[j].setOptions(tempOptions);
}
}
}
} else {
for ( i = 0; i < draw_strArray.length; i++) {
for (var j = 0; j < geoXmlDoc.placemarks.length; j++) {
if (draw_strArray[i] == geoXmlDoc.placemarks[j].vars.val.GEO_ID2) {
geoXmlDoc.gpolygons[j].setOptions({fillOpacity: 0.0});
}
}
}
}
});
function useTheData(doc) {
geoXmlDoc= doc[0];
for ( i = 0; i < zoomArray.length; i++) {
for (var j = 0; j < geoXmlDoc.placemarks.length; j++) {
if (zoomArray[i] == geoXmlDoc.placemarks[j].vars.val.GEO_ID2) {
geoXmlDoc.gpolygons[j].setOptions(tempOptions);
}
}
}
};
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>