如何動態更改谷歌地圖標記圖標

Question

我正在使用ajax和php，並從數據庫中獲取所有點並將其繪制在地圖上。 哪個工作正常。 但是，我想根據每個記錄的數據庫狀態是100還是200或300來更改標記的圖標。 我似乎什么也無法工作。 這是我的代碼：

if (localStorage.getItem('type2') !== null) {


    $(function ()

    {
        var radius2 = localStorage.getItem("radius2");
        var lat2 = localStorage.getItem("lat2");
        var long2 = localStorage.getItem("long2");
        var type2 = localStorage.getItem("type2");
        var city2 = localStorage.getItem("city2");
        var rep2 = localStorage.getItem("rep2");
        var size2 = localStorage.getItem("size2");
        var status2 = localStorage.getItem("status2");

        $.ajax({
            url: 'http://example.com/Test/www/22233333.php',
            data: "city2=" + city2 + "&rep2=" + rep2 + "&status2=" + status2 + "&size2=" + size2 + "&type2=" + type2 + "&long2=" + long2 + "&lat2=" + lat2 + "&radius2=" + radius2,
            type: 'post',
            dataType: 'json',
            success: function (data) {
                $.each(data, function (key, val) {


                    var lng = val['lng'];
                    var lat = val['lat'];
                    var id = val['id'];
                    var name = val['name'];
                    var address = val['address'];
                    var category = val['category'];
                    var city = val['city'];
                    var state = val['state'];
                    var rep = val['rep'];
                    var status = val['status'];
                    var size = val['size'];

                    $('div#google-map').gmap('addMarker', {
                        'position': new google.maps.LatLng(lat, lng),
                        'bounds': true,
                        'icon': 'images/hospital.png'
                    }).click(function () {
                        $('div#google-map').gmap('openInfoWindow', {
                            'backgroundColor': "rgb(32,32,32)",
                            'content': "<table><tr><td>Name:</td><td>" + name + "</td></tr><tr><td>Address:</td><td>" + address + ", " + city + "&nbsp;" + state + "</td></tr><tr><td>Category:</td><td>" + category + "</td></tr><tr><td>Rep:</td><td>" + rep + "</td></tr><tr><td>Status:</td><td>" + status + "</td></tr><tr><td>Size:</td><td>" + size + "</td></tr></table>"
                        }, this);


                    });

                })

            }
        });


    })
}

Answer 1

看起來您正在使用jquery-ui-map？

我沒有使用這種抽象

您可以調用setIcon函數-在標記上可以通過這種方式為主要API https://developers.google.com/maps/documentation/javascript/reference#Marker設置圖標

因此，您的addMarker方法將通過其外觀返回一個標記實例，因此一旦運行setIcon

Answer 2

使用$ .each在成功函數中執行類似的操作。 狀態是數據庫字段

var size = val['size'];
var status = val['status'];
var icon = '';
if (status == 100){
   icon = 'images/icon1.png'; //your icon1
}else if (status == 100){
   icon = 'images/icon1.png'; //your icon2
}
...




$('div#google-map').gmap('addMarker', {
       'position': new google.maps.LatLng(lat, lng),
       'bounds': true,
       'icon': icon //your dynamic icon
})

希望這可以幫助