标记颜色保持黑色Google Maps API

时间:2013-08-09 22:34:44

标签: google-maps google-maps-api-3 google-maps-markers

我根据Google Maps API上0到1之间的分数编写了一个脚本来更改标记颜色,但是此刻的标记颜色只是黑色,我附上了我的JavaScript文件的内容:

function initialize() {
    var mapOptions = {
        zoom: 7,
        center: new google.maps.LatLng(52.63506336920521, -1.8656949083418475),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    writePlaceMarkers();
}
console.log("1");

function placeMarker(lat, long, name, score) {
    var pinColor = get_colour(score);
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
                                               new google.maps.Size(21, 34),
                                               new google.maps.Point(0, 0),
                                               new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
                                                new google.maps.Size(40, 37),
                                                new google.maps.Point(0, 0),
                                                new google.maps.Point(12, 35));
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        map: map,
        title: name,
        icon: pinImage,
        shadow: pinShadow
    });
    var info = contentString(name);
    google.maps.event.addListener(marker, 'click', function () {
        info.open(map, marker);
        console.log("2");
    });
}

function get_colour(score) //Score between 0 and 1
{
    score = score * 511
    var R;
    var G;
    var B = 0;
    if (score > 255) {
        G = 255;
        R = 511 - score;
    } else if (score < 255) {
        G = score;
        R = 255;
    } else //score==255
    {
        G = 255;
        R = 255;
    }
    console.log("3");
    R = parseInt(R).toString(16);
    G = parseInt(G).toString(16);
    B = parseInt(B).toString(16);

    if (R.length == 1) {
        R = "0" + R;
    }

    if (G.length == 1) {
        G = "0" + G;
    }
    console.log("4");
    if (B.length == 1) {
        B = "0" + B;
    }
    //console.log("#" + R + G + B);
    return ("#" + R + G + B);
    console.log("5");
}

var windowContent = '<div id="content">';

function contentString(windowContent) {
    windowContent;
    var infowindow = new google.maps.InfoWindow({
        content: windowContent
    });
    return infowindow;
};

//54.78414136681993, -1.5866319722800213
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyA0X5j1MoM3hf3l2-F-HHV6plb5dJOy9Ng&sensor=false&callback=initialize";
    document.body.appendChild(script);
}


window.onload = loadScript;

1 个答案:

答案 0 :(得分:3)

您正在添加不在definition for the color

中的“#”

在get_color函数中

return("#" + R + G + B);

应该是:

return(R + G + B);

working example

顺便说一下,API的文档中有这样的声明:

重要:截至2012年4月20日,Google图表工具的图片图表部分已officially deprecated。它将继续按照我们的deprecation policy工作。