如何更改 Google Maps API V3 中的图标颜色？

Posted 2023-02-23

【中文标题】如何更改 Google Maps API V3 中的图标颜色？

【英文标题】：How do I change icon colour in Google Maps API V3?

【发布时间】：2013-04-18 20:13:22

【问题描述】：

我想将 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> 

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

【参考方案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

【讨论】：

谢谢。它确实显示了一个蓝色标记。但是，没有弹出窗口/文本消息来说明标记的用途。如何更改它以添加消息？var point = new google.maps.LatLng(37.679405,-113.063736) var marker = createMarker(point,'Utah-Cedar City'); var marker = new google.maps.Marker( position: new google.maps.LatLng(40.970826,-112.048187), map: map, icon: pinImage, shadow: pinShadow ); var point = new google.maps.LatLng(39.375196,-112.335784) var marker = createMarker(point,'Utah-Oak City-Delta');

此蓝色标记的创建方式与您由createMarker(point, content) 函数创建的其他标记不同。如果你想让它在点击时弹出，你需要在蓝色标记上添加一个eventListener，就像你在createMarker函数中对其他标记所做的那样。