如何动态更改谷歌地图标记图标 [英] How to change google maps marker icon dynamically

问题描述

我正在使用ajax和php，并从数据库中获取所有点并将其绘制在地图上.哪个工作正常.但是，我想根据每个记录的数据库状态是100还是200或300来更改标记的图标.我似乎什么也没用.这是我的代码:

I am using ajax and php and I grabbing all of the points out of my database and plotting them on the map. Which works fine. However I want to change the icon of the marker depending on if status in the database is 100 or 200 or 300 for each record. I can't seem to get anything to work. Here is my code:

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


                    });

                })

            }
        });


    })
}

推荐答案

看起来您正在使用jquery-ui-map吗?

Looks like you are using jquery-ui-map?

我没有使用这种抽象

您可以调用setIcon函数-在标记上可以通过这种方式为主API设置其图标 https://developers.google.com/maps/documentation/javascript/reference#Marker

You can call the setIcon function - on a marker you can set it's icon this way for the main API https://developers.google.com/maps/documentation/javascript/reference#Marker

因此，您的addMarker方法将通过其外观返回一个标记实例，因此一旦您运行了setIcon

So your addMarker method will return a marker instance by the look of it so once you have that run setIcon

这篇关于如何动态更改谷歌地图标记图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！