Google maps api 3 如何将此功能更改为带有数字标记的图标\u blue1.png marker\u blue2.png。。。使用悬停标记_yellow1.png标记_yellow2.png

此变量将收集最终放置在侧栏中的html 如何将map api v3的图标标记功能更改为带有数字thx的图标，以获得您的帮助 var side_bar_html=“”

//用于保存侧栏使用的标记和html副本的数组
//因为函数闭包技巧在那里不起作用
var gmarkers=[]；
var gicons=[]；
//全局“映射”变量
var-map=null；
gicons[“red”]=新的google.maps.MarkerImage（“./mapIcons/marker_red.png”，
//此标记宽20像素，高34像素。
新谷歌地图大小（20,34），
//此图像的原点为0,0。
新google.maps.Point（0,0），
//这张图片的锚定点是9,34。
新google.maps.Point（9,34））；
//标记大小表示为X，Y的大小
//图像（0,0）的原点所在的位置
//在图像的左上角。
//标记的原点、锚定位置和坐标
//沿X方向向右和向内增加
//Y方向向下。
var iconImage=new google.maps.MarkerImage（'./mapIcons/marker_red.png'，
//此标记宽20像素，高34像素。
新谷歌地图大小（20,34），
//此图像的原点为0,0。
新google.maps.Point（0,0），
//这张图片的锚定点是9,34。
新google.maps.Point（9,34））；
var iconShadow=new google.maps.MarkerImage（'./mapIcons/shadow50.png'，
//阴影图像在水平维度上更大
//而位置和偏移量与主图像相同。
新谷歌地图尺寸（37,34），
新google.maps.Point（0,0），
新的google.maps.Point（0,10））；
//形状定义图标的可单击区域。
//该类型定义了一个HTML区域元素“poly”，该元素
//将多边形绘制为一系列X、Y点。决赛
//坐标通过连接到第一个多边形来关闭多边形
//协调。
var iconShape={
坐标：[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,11,30,12,26,13,24,14,21,16,18,16,20,20,8,18,4,16,2,15,13,0]，
类型：“poly”
};
函数getMarkerImage（iconColor）{
如果（（typeof（iconColor）=“未定义”）| |（iconColor==null））{
iconColor=“红色”；
}
如果（！gicons[iconColor]）{
gicons[iconColor]=新的google.maps.MarkerImage（“./mapIcons/marker_”+iconColor+.png”，
//此标记宽20像素，高34像素。
新谷歌地图大小（20,34），
//此图像的原点为0,0。
新google.maps.Point（0,0），
//这张图片的锚定点是6,20。
新google.maps.Point（9,34））；
} 
返回gicons[iconColor]；
}
gicons[“蓝色”]=getMarkerImage（“蓝色”）；
gicons[“绿色”]=getMarkerImage（“绿色”）；
gicons[“yellow”]=getMarkerImage（“黄色”）；
//创建标记和设置事件窗口功能的函数
函数createMarker（latlng、名称、html、颜色）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
图标：gicons[颜色]，
影子：iconShadow，
地图：地图，
标题：姓名，
zIndex:Math.round（latlng.lat（）*-100000）有用于动态创建的图表工具



阅读“引脚”一节

      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
      var gicons = [];
     // global "map" variable
      var map = null;
gicons["red"] = new google.maps.MarkerImage("./mapIcons/marker_red.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = new google.maps.MarkerImage('./mapIcons/marker_red.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('./mapIcons/shadow50.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 10));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var iconShape = {
      coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
      type: 'poly'
  };

function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }
   if (!gicons[iconColor]) {
      gicons[iconColor] = new google.maps.MarkerImage("./mapIcons/marker_"+ iconColor +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
   } 
   return gicons[iconColor];

}

      gicons["blue"] = getMarkerImage("blue");
      gicons["green"] = getMarkerImage("green");
      gicons["yelow"] = getMarkerImage("yellow");
// A function to create the marker and set up the event window function 
function createMarker(latlng,name,html,color) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        icon: gicons[color],
        shadow: iconShadow,
        map: map,
        title: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
        });
        // Switch icon on marker mouseover and mouseout
        google.maps.event.addListener(marker, "mouseover", function() {
          marker.setIcon(gicons["yellow"]);
        });
        google.maps.event.addListener(marker, "mouseout", function() {
          marker.setIcon(gicons["blue"]);
        });
    gmarkers.push(marker);
    // add a line to the side_bar html
    var marker_num = gmarkers.length-1;
    side_bar_html += '<a href="javascript:myclick(' + marker_num + ')"  onmouseover="javascript:myclick(' + marker_num + ')" onmouseover="gmarkers['+marker_num+'].setIcon(gicons.yellow)" onmouseout="gmarkers['+marker_num+'].setIcon(gicons.blue)">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "mouseover");
}