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

希望这有帮助

如何动态更改谷歌地图标记图标

2 个答案: