我需要在网页中显示多边形。该区域的颜色必须根据该地区居民的数量动态变化。居民数量存储在json文件中。如果我将常数统计为居民,则绘制多边形,但是当我调用json文件并从json设置count时,不会绘制多边形。请帮忙!这是我的代码:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 43.2392374, lng: 76.8871528},
zoom: 13,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var json = require('./data.json');
var jobj = json["1"];
var colAlma = parseInt(jobj["cnt"]);
var almaCoords = [
{ lat: 43.256389, lng: 76.865019 },
{ lat: 43.233377, lng: 76.870684 },
{ lat: 43.237147, lng: 76.877402 },
{ lat: 43.238709, lng: 76.889548 },
{ lat: 43.242597, lng: 76.948407 },
{ lat: 43.270325, lng: 76.944681 },
{ lat: 43.268801, lng: 76.923655 },
{ lat: 43.265717, lng: 76.909109 },
{ lat: 43.265011, lng: 76.904823 },
{ lat: 43.257689, lng: 76.883541 },
{ lat: 43.258172, lng: 76.870425 }
];
var colorAlma ;
if (colAlma > 0 && colAlma < 10){
colorAlma = '#00FF7F';
}
if (colAlma >= 10 && colAlma < 20){
colorAlma = '#00FF00';
}
if (colAlma >= 20 && colAlma < 30){
colorAlma = '#ADFF2F';
}
if (colAlma >= 30 && colAlma < 40){
colorAlma = '#EEE8AA';
}
if (colAlma >= 40 && colAlma < 50){
colorAlma = '#FFD700';
}
if (colAlma >= 50 && colAlma < 60){
colorAlma = '#FF8C00';
}
if (colAlma >= 60 && colAlma < 70){
colorAlma = '#FF4500';
}
var almaTriangle = new google.maps.Polygon({
paths: almaCoords,
strokeColor: colorAlma,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: colorAlma,
fillOpacity: 0.35
});
almaTriangle.setMap(map);
}