我想为荷兰建立像this这样的东西。我有各省的名称,你点击其中一个,它应该响亮它的边界并显示它,所以设置正确的界限。这是我的代码:
from collections import defaultdict
combined = defaultdict(list)
for i in list1:
combined[i[0]].append(i)
一个工作示例也在codepen上: http://codepen.io/anon/pen/JXvXjb
我的问题:它显示了视口中所有内容的边框和kml数据,而不仅仅是选定的省份。查询错误了吗?我也希望在地理编码的例子中,视口设置为选定的省。为此,我需要boundsdata并使用var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA";
var CountryName = "Netherlands";
google.load('visualization', '1', {
'packages': ['corechart', 'table', 'geomap']
});
jQuery(document).ready(function() {
var mapProp = {
center: new google.maps.LatLng(52.24730, 5.36449),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
jQuery("span").click(function() {
var name = jQuery(this).text();
//map.fitBounds(gpolygons[id].bounds);
var queryStr = {
select: 'kml_4326',
from: FT_TableID,
where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'"
};
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryStr);
var FT_Options = {
suppressInfoWindows: true,
query: query
};
layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);
layer.setMap(map);
});
});
和bounds.extend()
进行设置。但是我从哪里可以获得这些数据?
答案 0 :(得分:1)
您的FusionTableLayer无法正常工作,因为您使用了错误的语法(“旧”语法,而不是currently documented语法)。 “旧”语法不适用于加密的ID。当查询语法不正确,但您给它一个有效的表时,它会显示所有数据。
“旧”语法:
layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);
这是(当前)记录的语法:
var FT_Options = {
suppressInfoWindows: true,
query: {
select: 'kml_4326',
from: FT_TableID,
where: "'name_0' = '" + CountryName + "'"
},
styles: [{
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 3
}
}]
};
layer = new google.maps.FusionTablesLayer(FT_Options);
您的省级查询也存在问题(省名拼写错误(或者至少与表格中的名称不同),因此查询与任何行都不匹配。
代码段
var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA";
var CountryName = "Netherlands";
google.load('visualization', '1', {
'packages': ['corechart', 'table', 'geomap']
});
jQuery(document).ready(function() {
var mapProp = {
center: new google.maps.LatLng(52.24730, 5.36449),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var queryStr = {
select: 'kml_4326',
from: FT_TableID,
where: "'name_0' = '" + CountryName + "'"
};
var FT_Options = {
suppressInfoWindows: true,
query: queryStr,
styles: [{
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 3
}
}]
};
layer = new google.maps.FusionTablesLayer(FT_Options);
layer.setMap(map);
jQuery("span").click(function() {
var name = jQuery(this).text();
var queryStr = {
select: 'kml_4326',
from: FT_TableID,
where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'"
};
var FT_Options = {
query: queryStr,
styles: [{
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 3
}
}]
};
layer.setOptions(FT_Options);
});
});
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Zeeland</span>
<span>Drenthe</span>
<br>
<div id="googleMap"></div>