1

我编写了一个脚本来根据 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;
4

1 回答 1

3

您正在添加一个不在颜色定义中的“#”

在 get_color 函数中

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

应该：

return(R + G + B);

工作示例

顺便说一句，API 的文档中有这样的声明：

重要提示：Google 图表工具的图像图表部分已于2012 年 4 月 20 日正式弃用。它将根据我们的弃用政策继续工作。

于 2013-08-09T23:17:27.160 回答