Как динамически изменить значок маркера Google Maps

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
})

Надеюсь, это поможет