【发布时间】：2019-09-13 07:10:38
【问题描述】：
这是一个带有 JSON 覆盖的基本 Google 地图
COLOR 单选按钮只是从 JSON 文件中提取颜色。
收入单选按钮是一个叶绿素地图，其中颜色或每个单独的多边形取决于收入所在的范围。
我想更改 INCOME 地图的 JSON 叠加层的 fillColor。
我有两个决定叶绿素颜色的开关
第一个开关连接到 var incomeColorArea1
第二个开关连接到 var incomeColorArea2
我还有两个单独的 JSON 文件 var area1 和 var area2
我希望第一个开关与 var area1 相关联，我希望第二个开关与 var area2
相关联我尝试在下面添加一个简单的 if then 语句：
if (area1.checked) {
var incomeColor = incomeColorArea1;
} else if (area2.checked) {
var incomeColor = incomeColorArea2;
}
它不起作用。
唯一有效的方法是手动更改：
incomeColor 到 incomeColorArea1 或 incomeColorArea2
在下面的代码中：
if (color.checked) {
return {
fillColor: feature.getProperty('COLOR'),
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.4,
strokeOpacity: 1,
zIndex: 0
};
} else if (income.checked) {
return {
fillColor: incomeColor,
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.8,
strokeOpacity: 1,
zIndex: 0
};
}
}
完整代码如下：
var map;
//COLORS
// Income Map Color
var incomeColor1 = '#f2f0f7';
var incomeColor2 = '#cbc9e2';
var incomeColor3 = '#9e9ac8';
var incomeColor4 = '#756bb1';
var incomeColor5 = '#54278f';
// LEGEND SCORES
// Income Map Score
//Area 1 incomeScore
var incomeScore1 = 20000;
var incomeScore2 = 50000;
var incomeScore3 = 80000;
var incomeScore4 = 110000;
var incomeScore5 = 140000;
//Area 2 incomeScore
var incomeScore6 = 40000;
var incomeScore7 = 60000;
var incomeScore8 = 100000;
var incomeScore9 = 160000;
var incomeScore10 = 500000;
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 40.656963,lng: -112.506664},
gestureHandling: 'greedy',
mapTypeControl: false
});
var area1 = createArea('https://api.myjson.com/bins/t1mhs');
var area2 = createArea('https://api.myjson.com/bins/zle5c');
function changeMap(feature) {
var incomeScore = feature.getProperty('INCOME');
var incomeColorArea1 = ""; // polygon fill color
//Area 1 Income Switch
switch (true) {
case ( incomeScore == 0 || incomeScore === null ): // in case of no value
incomeColor = '#d4d4d4'; break;
case ( incomeScore <= incomeScore1): incomeColorArea1 = incomeColor1; break;
case ( incomeScore <= incomeScore2): incomeColorArea1 = incomeColor2; break;
case ( incomeScore <= incomeScore3): incomeColorArea1 = incomeColor3; break;
case ( incomeScore <= incomeScore4): incomeColorArea1 = incomeColor4; break;
case ( incomeScore <= incomeScore5): incomeColorArea1 = incomeColor5; break;
default: incomeColor = '#d4d4d4'; break;
}
var incomeColorArea2 = ""; // polygon fill color
//Area 2 Income Switch
switch (true) {
case ( incomeScore == 0 || incomeScore === null ): // in case of no value
incomeColor = '#d4d4d4'; break;
case ( incomeScore <= incomeScore6): incomeColorArea2 = incomeColor1; break;
case ( incomeScore <= incomeScore7): incomeColorArea2 = incomeColor2; break;
case ( incomeScore <= incomeScore8): incomeColorArea2 = incomeColor3; break;
case ( incomeScore <= incomeScore9): incomeColorArea2 = incomeColor4; break;
case ( incomeScore <= incomeScore10): incomeColorArea2 = incomeColor5; break;
default: incomeColor = '#d4d4d4'; break;
}
if (area1.checked) {
var incomeColor = incomeColorArea1;
} else if (area2.checked) {
var incomeColor = incomeColorArea2;
}
if (color.checked) {
return {
fillColor: feature.getProperty('COLOR'),
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.4,
strokeOpacity: 1,
zIndex: 0
};
} else if (income.checked) {
return {
fillColor: incomeColor,
strokeWeight: 1,
strokeColor: 'black',
fillOpacity: 0.8,
strokeOpacity: 1,
zIndex: 0
};
}
}
// Infowindow
var infoWindow = new google.maps.InfoWindow({
zIndex: 2
});
map.addListener('click', function() {
area1.revertStyle();
area2.revertStyle();
infoWindow.close();
})
function clickFunc(event) {
this.revertStyle();
this.overrideStyle(event.feature, {
strokeWeight: 2,
strokeColor: 'black',
zIndex: 1
});
}
function mouseFunc(event) {
this.revertStyle();
this.overrideStyle(event.feature, {
strokeWeight: 2,
strokeColor: 'black',
zIndex: 1
});
}
function createArea(url) {
var area = new google.maps.Data();
area.loadGeoJson(url);
area.setStyle(changeMap);
area.addListener('click', clickFunc);
area.addListener('mouseover', mouseFunc);
return area;
}
setArea();
function setArea() {
infoWindow.close();
area1.setMap(document.getElementById('area1').checked ? map : null);
area2.setMap(document.getElementById('area2').checked ? map : null);
}
google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('color'), 'click', setArea);
google.maps.event.addDomListener(document.getElementById('income'), 'click', setArea);
} #map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}<div id="content">
<form class="form"">
<div class="switch-field">
<input type="radio" id="area1" name="switch-two" checked/>
<label for="area1">Area 1</label>
<input type="radio" id="area2" name="switch-two"/>
<label for="area2">Area 2</label>
</div>
<label class="container" style="margin-top: 12px;">COLOR
<input type="radio" checked="checked" name="radio" id="color">
<span class="checkmark"></span>
</label>
</br>
<label class="container">INCOME
<input type="radio" name="radio" id="income">
<span class="checkmark"></span>
</label>
</form>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initAutocomplete" async defer></script>【问题讨论】：
标签： javascript json google-maps-api-3