2013-04-25 70 views
4

我想将COUNTY图标更改为蓝色(除红色以外的任何内容)。如何更改Google Maps API V3中的图标颜色?

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

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

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

+0

FIXED:谢谢。 – 2013-04-25 06:06:12

回答

14

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

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

+0

谢谢。它确实显示一个蓝色标记。但是没有弹出式窗口/文本消息来说明标记的用途。 var point = new google.maps.LatLng(37.679405,-113.063736) var marker = createMarker(point,'Utah-Cedar City');如何修改它以添加消息? 变种标记=新google.maps.Marker({ 位置:新google.maps.LatLng(40.970826,-112.048187) 图:图, 图标:pinImage, 阴影:pinShadow }); var point = new google.maps.LatLng(39.375196,-112.335784) var marker = createMarker(point,'Utah-Oak City-Delta'); – 2013-04-25 05:20:52

+0

这个蓝色标记创建的方式与'createMarker(point,content)'函数创建的其他标记不同。如果你想让它在点击时弹出,你需要添加一个'eventListener'到蓝色标记,就像你在'createMarker'函数中对其他标记的操作一样。 – 2013-04-26 02:43:32

相关问题