google-maps-api-3 - 如何更改 Google Maps API V3 中的图标颜色？

Question

我想将 COUNTY 图标更改为蓝色(红色除外)。

有没有办法为特定点定义不同的图标颜色？

    <script type="text/javascript"> 
    //<![CDATA[
    var map = null;
function initialize() {
 var myOptions = {
  zoom: 8,
  center: new google.maps.LatLng(39.831125875,-112.15968925),
  mapTypeControl: true,
  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
    map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

   google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

  // Add markers to the map
  // Set up three markers with info windows 


   var point = new google.maps.LatLng(40.970826,-112.048187)
   var marker = createMarker(point,'Utah-Davis County');


   var point = new google.maps.LatLng(40.235509,-111.660576)
   var marker = createMarker(point,'Utah-Provo');

   var point = new google.maps.LatLng(40.766502,-111.897812)
   var marker = createMarker(point,'Utah-Salt Lake City');


  }

   var infowindow = new google.maps.InfoWindow(
   { 
     size: new google.maps.Size(150,50)
    });




 function createMarker(latlng, html) {
   var contentString = html;
   var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

   google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });
   }


function animate(lati,long) {
    var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
    map.panTo(latLng); //Make map global
}


//]]>
</script> 

有没有办法为特定点定义不同的图标颜色？

Answer 1

我认为这会有所帮助。不过，您必须创建一个自定义标记。

Google Maps API 3 - Custom marker color for default (dot) marker

专门针对您的问题，您可以执行以下操作:

var pinColor = "2F76EE"; // a random blue color that i picked
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

然后

var marker = new google.maps.Marker({
            position: new google.maps.LatLng(0,0), 
            map: map,
            icon: pinImage,
            shadow: pinShadow
        });

归功于 matt burns