如何在此javascript中更改标记图像

时间:2009-11-11 14:57:48

标签: javascript google-maps

我想在此javascript中更改我的标记的图像 任何人都可以帮助我吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" 
            type="text/javascript"></script> 

<script type="text/javascript"> 

function geocoder(){ 

var place =  document.getElementById("textarea").value; 

geocoder = new GClientGeocoder(); 
geocoder.getLatLng(place, function(point) 
{ 
    if (!point) 
 { 
        alert(place + " not found"); 
     } 
else 
{ 
        var info = "<h3>"+place+"</h3>Latitude: "+point.y+"  Longitude:"+point.x; 
        var map = new GMap2(document.getElementById("map_canvas")); 
       map.setCenter(point, 13); 
        map.setUIToDefault();            
      var marker = new GMarker(point);

     map.addOverlay(marker); 
        marker.openInfoWindowHtml(point.toUrlValue(5)); 



} 
}

);
} 
</script> 





</head> 

<body> 


<table width="347" border="1" align="right"> 
  <tr> 
    <td width="168">&nbsp;</td> 
    <td width="163">&nbsp;</td> 
  </tr> 
  <tr> 
    <td height="45"><div align="right">Address : </div></td> 
    <td><form id="form1" name="form1" method="post" action=""> 
      <label> 
      <textarea name="textarea" id="textarea"></textarea> 
      </label> 
    </form> 
    </td> 
  </tr> 
  <tr> 
    <td><form id="form2" name="form2" method="post" action=""> 
      <label> 
        <input name="Button" type="Button" id="Button" value="Submit" onClick="geocoder()" onunload="GUnload()"/> 
        </label> 
    </form> 
    </td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
 <div id="map_canvas" style="width: 500px; height: 300px"></div> 


</body> 
</html>

2 个答案:

答案 0 :(得分:1)

GMarker构造函数将GMarkerOptions作为第二个参数。您可以使用它来指定用于标记的GIcon

看起来像这样:

var marker = new GMarker(point, {
    icon: new GIcon(
        G_DEFAULT_ICON, 
        '/images/custom_marker.png')
    });

这使用默认图标作为基线,并仅更改主图像。您可以在图标上设置许多其他属性,具体取决于您是否需要更改阴影等。

您还可以将图片上传到网站,例如Google Map Custom Marker Maker,这会为图标创建额外的图片和javascript。

最后,请查看Google地图论坛上的Custom Icons for Markers主题。

答案 1 :(得分:1)

您可以像这样指定标记参数:

var num = 1 //etc..
var icon = new GIcon();
icon.image = "/mapIcons/icon"+num+".png";
icon.iconSize = new GSize(20,32);
icon.shadowSize = new GSize(20, 34);
icon.iconAnchor = new GPoint(11, 15);
icon.infoWindowAnchor = new GPoint(11, 15);
icon.shadow = "";