使用Google Maps JavaScript API，是否可以从外部按钮将数据获取到map.data.setStyl

Question

所以我有一个大的geojson文件，其中有大约3000个多边形，每个多边形大约有10个属性。我想在网页上有几个按钮，将信息传递到setStyle函数中，在那里我可以使用它在用于设置地图样式的属性之间切换。

这是脚本块和两个按钮。

<input id = 'Default' type ='button' value ='Default'>
<input id = 'Ranked' type ='button' value ='Ranked'>
<script>
let my_data = JSON.parse('{{ json_data | tojson | safe }}');
function initMap() {
let map = new google.maps.Map(document.getElementById('Map'), {
zoom: 8,
center: { lat: 41, lng: -78 },
});
map.data.addGeoJson(my_data);
map.data.setStyle(
function(feature){
let income = feature.getProperty('Ranked_Income');
let houses = feature.getProperty('Ranked_Houses');
let income2 = feature.getProperty('Normalized_Income');
let houses2 = feature.getProperty('Normalized_Houses');
let r, g, b = 0;
r = '00';
g = Math.round((income) * 255);
b = Math.round((1 - income) * 255);
let color = '#' + r.toString(16) + g.toString(16) + b.toString(16);

return {
fillOpacity: 0.75,
fillColor: color,
strokeWeight: 0.3,
};
}
);
}
</script>

我想要一个按钮来在排名收入和标准化收入之间切换。稍后，我也希望能够选择各种颜色，但我不知道如何将任何外部信息输入该功能。

Answer 1

所以我找到了一个解决方法。我只是复制了整个map.setStyle块，并用if语句控制它。然后，我再次调用init map来重新加载页面。

这可能是一个糟糕的解决方案，如果有人有更好的地方，请告诉我。