如何动态更改Google地图标记图标

问题描述：

我正在使用ajax和php，并且我抓取了我的数据库中的所有点并将它们绘制在地图上。哪些工作正常。不过，我想根据数据库中的状态是100或200还是300来更改标记的图标。我似乎无法得到任何工作。这里是我的代码：如何动态更改Google地图标记图标

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的地图？

我没有使用过这种抽象

可以调用的setIcon功能 - 一个标记，你可以将它的图标，这种方式的主要API https://developers.google.com/maps/documentation/javascript/reference#Marker

所以你addMarker方法将返回一个标记通过它的外观实例，所以一旦你运行setIcon

答

在$。每次不要在你的成功的功能是这样用。状态是数据库领域

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

希望这有助于

如何动态更改Google地图标记图标

相关推荐