繁体   English   中英

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

[英]How can I change markers images in this javascript

我想更改此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>

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 Maps组中查看“标记自定义图标”主题。

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

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 = "";

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM