Google API根據不同類別使用不同顏色的多個標記

因此，下面的代碼是由CMS系統使用郵政編碼和城市創建的。一切工作正常，但我想要做的是改變每個針的顏色取決於類我有3類紅色，綠色和藍色這個標記應該改變，這取決於在CMS系統中選擇什麼類。什麼是實現這一目標的最佳方式？Google API根據不同類別使用不同顏色的多個標記

$(document).ready(function() { 
     var map; 
     var elevator; 
     var myOptions = { 
      zoom: 3, 
      center: new google.maps.LatLng(50, -30), 
      mapTypeId: 'terrain' 
     }; 

     map = new google.maps.Map($('#map_canvas')[0], myOptions); 

     var styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}]; 

     map.setOptions({styles: styles}); 

     var iterator = 0;  
     var addresses = [ 


     ['<div class="red"></div>New York', ' 10007'], 


     ['<div class="green"></div>Mexico', ' 10100'], 


     ['<div class="blue"></div>Spain', ' 04830'], 

    ]; 


      for (var x = 0; x < addresses.length; x++) { 
        MarkMe(); 
      } 


     function MarkMe() { 
      var add = addresses[iterator]; 
      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) { 
       var p = data.results[0].geometry.location 
       var o = data.results[0] 
       var latlng = new google.maps.LatLng(p.lat, p.lng); 
       var pinColor = "red"; 
       var pinImage = new google.maps.MarkerImage('/assets/images/pin-' + pinColor + '.png', 
       new google.maps.Size(22, 31)); 

       var content = '<div style="width: 150px;">' + add + '<br/></div>'; 

       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        clickable: true, 
        icon: pinImage, 
        title: o + '<br/>' + add, 
        }); 

    function getInfoCallback(map, content) { 
         var infowindow = new google.maps.InfoWindow({ content: content }); 
         return function() { 

          infowindow.setContent(content); 
          infowindow.open(map, this); 
         }; 
        }; 
        google.maps.event.addListener(marker, 'click', getInfoCallback(map, content)); 

       }); 
       iterator++; 
      } 
     })

來源

2014-07-11 Adam

您可以創建1個數組類型（飯店，酒店）或驗證

的設置默認值，試試這個代碼：

var marker_new = new Array(); 
var url = ""; 
if(a == "hotels"){ 
    url = "http://exampl.com/yellow.png"; 
}else{ 
    url = "http://exampl.com/green.png" 
} 
marker_new[i] = google.maps.Marker({ 
           icon: _url; 
           position: place.geometry.location, 
           map: map 
           });

如何使用

marker_new[i] = new google.maps.Marker({ 
     position: place.geometry.location, 
     map: map 
    }); 
    iw = new google.maps.InfoWindow({ 
     content: getIWContent(place) 
    }); 
    iw.open(map, marker_new[i]);

如何使用

  marker_new[i] = new google.maps.Marker({ 
      position: results[i].geometry.location, 
      animation: google.maps.Animation.DROP 
      }); 
      google.maps.event.addListener(marker_new[i], 'click', getDetails(results[i], i));

or read more in：How can I modify the markers?

來源

2014-07-11 12:06:56 HoangHieu

Google API根據不同類別使用不同顏色的多個標記

回答

相關問題