通過輸入數組數據來動態更改Google Maps圖標

Question

我對javascript完全陌生，並且承擔了將舊的jvector地圖轉換為google maps API的任務。 我想到目前為止我做得不錯！ 我設法使地圖上所有指定位置的所有正確標記均被填充，單擊它們時會彈出漂亮的閃亮信息窗口。 到目前為止，那部分還不錯。

我遇到麻煩的地方是，當我嘗試根據數組中的字符串是否匹配8種不同類型的列表來動態更改Google地圖加載時的Google Maps圖標時。 我正在使用的主要代碼如下所示：

數據數組樣本

該數組大約有30個故事，但是為了簡潔起見，我刪除了內容並提供了以下代碼結構。

 var stories = [
    // ACT Markers 
    // ACT ICT
    {
        latlng: [-35.3449476, 148],
        name: "Business name - tagline after the business name",
        type: "ICT",
        text: 'some basic text marked up with html',
           },

主要代碼示例：

window.onload = function() {
    LoadMap();
};

function LoadMap() {
    var mapOptions = {
        center: new google.maps.LatLng(-25.363882, 131.044922),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-content"), mapOptions);

    for (var i = 0; i < stories.length; i++) {
        var storydata = stories[i];
        var myLatLng = new google.maps.LatLng(storydata.latlng[0], storydata.latlng[1]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: storydata.name,
            content: storydata.text,
        });

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(this.title + this.content);
            infowindow.open(map, this);
        });
    }

到目前為止，所有這些工作正常。 很可能有一種更聰明或更有效的方法來執行此操作，但是正如我所說的，我對任何種類的JavaScript都是全新的。

分類：問題

我現在想做的是根據stories.type更改圖標。 我一直在根據其他一些stackoverflow線程（似乎找不到鏈接）來研究以下內容，但是我不知道在哪里插入代碼以使其正常工作，或者我是否真的處於正確的位置公園。

for (var item in stories) {
    if (stories[i].type == 'Agrifood') iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    else if (stories[i].type == 'Biotechnology') iconString = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png';
    else if (stories[i].type == 'BuiltEnvironment') iconString = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
    else if (stories[i].type == 'Energy') iconString = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
    else if (stories[i].type == 'Engineering') iconString = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
    else if (stories[i].type == 'ICT') iconString = 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png';
    else if (stories[i].type == 'Manufacturing') iconString = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
    else if (stories[i].type == 'Mining') iconString = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
    else iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
}

非常感謝您提供的任何幫助。

Answer 1

您需要修改一些代碼，這可以達到目的：

for (var i = 0; i < stories.length; i++) {
    var storydata = stories[i];
    var iconString = '';
    switch (storydata.type) {
        case 'Agrifood':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
            break;
        case 'Biotechnology':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/pink-dot.png';
            break;
        case 'BuiltEnvironment':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
            break;
        case 'Energy':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
            break
        case 'Engineering':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png';
            break;
        case 'ICT':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png';
            break;
        case 'Manufacturing':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png';
            break;
        case 'Mining':
            iconString = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
            break;
        default:
            iconString = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    }

    var myLatLng = new google.maps.LatLng(storydata.latlng[0], storydata.latlng[1]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: iconString,
        title: storydata.name,
        content: storydata.text
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(this.title + this.content);
        infowindow.open(map, this);
    });
}