从json设置javascript变量时无法显示谷歌地图多边形

时间:2016-03-09 09:32:50

标签: javascript json google-maps google-maps-api-3

我需要在网页中显示多边形。该区域的颜色必须根据该地区居民的数量动态变化。居民数量存储在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);
}

0 个答案:

没有答案