更改Jquery單擊上的Google Map標記

Question

我正在嘗試通過單擊div並使用jquery來更改GoogleMap標記圖標。 但這似乎不起作用，標記圖標沒有改變。 我分配了一個包含圖像路徑的變量，但事實是，如果jquery更改了它，它將保留在jquery函數內部，並且不會傳遞回全局值。 這是我的代碼：

JS部分

$(document).ready(function() {

$('#hurricanes').click(function (e){
iconic=jQuery(this).attr('hurr.png');
    initMap();
});
$('#earthquakes').click(function (e){
iconic=jQuery(this).attr('durr.png');
    initMap();
});    
});


var iconBase = 'img/';
var iconic;
function createMarker(latlng, name, address1, address2, postalCode) {
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: name,
        icon: iconBase + iconic
    });

}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -0.397,
            lng: 10.644
        },
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        disableDefaultUI: true
    });
    displayMarkers();
}

和HTML按鈕：

    <div id="hurricanes" class="choices">HURRICANES</div>
    <div id="earthquakes" class="choices">EARTHQUAKES</div>

Answer 1

您應該在更改標記后使用JavaScript重新初始化地圖。 查看API參考中的所有選項： https : //developers.google.com/maps/documentation/javascript/3.exp/reference

盡管我不確定您要做什么，但是您也可以刪除特定坐標中的標記，然后使用新的標記圖標添加新的標記。

Answer 2

我通過重新初始化兩個函數找到了解決方案：

$(document).ready(function() {

$('#hurricanes').click(function (e){
iconic='hurr.png';
    createMarker();
    initMap();
    console.log(iconic);
});
$('#earthquakes').click(function (e){
iconic='durr.png';
    createMarker();
    initMap();
    console.log(iconic);
});


});