点击Jquery更改谷歌地图标记

Change Google Map marker on Jquery click

本文关键字：地图 图标 谷歌 Jquery 点击      更新时间：2023-09-26

我正试图通过单击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>

您应该在更改标记后使用JavaScript重新初始化映射。查看API参考资料，了解所有选项：https://developers.google.com/maps/documentation/javascript/3.exp/reference

虽然我不太确定你到底要做什么，但你也可以删除特定坐标中的标记，然后用新的标记图标添加新的标记。

我通过重新初始化两个函数找到了解决方案：

$(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);
});

});
相关文章：