Javascript 在google API中添加内容映射多个信息窗口（数组中的标记）

我正在编写一个带有多个标记和多个信息窗口的API v3地图。 我希望能够通过一个链接从一个信息窗口跳到另一个信息窗口。我用了沃尔夫冈·皮克勒的密码

尽管我想在每个信息窗口的内容中添加不同的图片和描述

---

我将尝试在maker阵列中添加和映像：

  var data = [ // Data of points and coords of sprite icons
   { name:"Germany", lat:"51.179342", lng:"10.50292", top: 64, left: 32, img:"imgs/D1/01-barbes.jpg" },
];

---

然后将其放入创建标记功能：

function createMarker(point, top, left, name, i, img) {

  var g = google.maps;
  var base = "http://sites.google.com/site/mxamples/icons-dot.png";
  var image = { url: base,
   size: new g.Size(32, 32),
   origin: new g.Point(top, left),
   anchor: new g.Point(15, 32) };
   var photos = img;

---

然后fanilly将其添加到我的信息窗口的内容中：

  var html ="<div class='infowindow'>" +
  "<h3 class='firstHeading'>"+ name + "<\/i><span><\/span><\/h3>"+
  "<div class='bodyWin'>"+ photos +
  "<p>My friend Addi is sitting on his chair waiting for customers." +
  "<\/p>"+
  "<a href='javascript:void(0)' onclick='infoopen(event, " + i + ")'>Next step<\/a>" +
  "<\/div>"+
  "<\/div>";

var html=“”+
“”+名称+“”+
“+照片+
“我的朋友阿迪正坐在椅子上等顾客。”+
""+
"

任何人都可以帮忙。我已经浏览了所有API文档和stackoverflow问题，但我找到了任何东西
t不能使用相同的代码

非常感谢
我找到了解决问题的方法。以下是您可以使用的完整代码：

//全局
var图，iw；
var gmarkers=[]；
函数createMarker（点、顶部、左侧、名称、i、img、描述）{
var g=google.maps；
变量基数=”http://sites.google.com/site/mxamples/icons-dot.png";
var image={url:base，
尺寸：新g尺寸（32,32），
原点：新的g点（顶部，左侧），
锚：新的g点（15,32）}；
var=img；
/*自API版本3.14以来，阴影已被弃用
var shadow={url:base，
尺码：新g码（59,32），
来源：新g.Point（192,32），
锚：新的g点（15,32）}；
*/
var marker=新的g.marker（{位置：点，
地图：地图，标题：名称，可点击：真，
可拖动：错误，图标：图像
});
var html=“”+
“”+名称+“”+点+“”+
""+ "" +
“”+descr+
""+ 
“<下一步”+
""+
"";
//将标记内容存储为Gmarker的属性
marker.content=html；
G标记器。推（标记器）；
g、 addListener（标记“单击”，函数（）{
iw.setContent（marker.content）；
iw.打开（地图，本）；
});
}
功能信息公开（e、nr）{
//调整数字
如果（nr
我在你的小提琴中发现一个错误
未捕获引用错误：infoopen未定义
。如果我修复了它，谢谢。我也修复了它，但图像（我尝试使用文本）仍然返回“未定义”。我如何修复它？
// Globals
var map, iw;
var gmarkers = [];



function createMarker(point, top, left, name, i, img, descr) {

  var g = google.maps;
  var base = "http://sites.google.com/site/mxamples/icons-dot.png";
  var image = { url: base,
   size: new g.Size(32, 32),
   origin: new g.Point(top, left),
   anchor: new g.Point(15, 32) };
   var photos = img;

  /* shadows are deprecated since API version 3.14
  var shadow = { url: base,
    size: new g.Size(59, 32),
    origin: new g.Point(192, 32),
    anchor: new g.Point(15, 32) };
  */





  var marker = new g.Marker({ position: point,
    map: map, title: name, clickable: true,
    draggable: false, icon: image
  });




  var html ="<div class='infowindow'>" +
  "<h3 class='firstHeading'>"+ name + "<\/i><span>"+point+"<\/span><\/h3>"+
  "<div class='bodyWin'>"+ "<img src='imgs/pix/"+img+".jpg' />" +
  "<p>" + descr +
  "<\/p>"+ 
  "<a href='javascript:void(0)' onclick='infoopen(event, " + i + ")'>< Next step<\/a>" +
  "<\/div>"+
  "<\/div>";




  // Store markers content as property of gmarkers
  marker.content = html;
  gmarkers.push(marker);

  g.event.addListener(marker, "click", function() {
   iw.setContent(marker.content);
   iw.open(map, this);
  });
}


function infoopen(e, nr) {

  // Adjust the number
  if (nr < gmarkers.length-1) { nr+= 1; }
  else { nr = 0; }

// iw.setContent(gmarkers[nr].content);
// iw.open(map, gmarkers[nr]);
   google.maps.event.trigger(gmarkers[nr], "click");

   // Stop the event from bubbling to the map and trigger a click event.
   // This is a Maps API regression bug.
   if (e && e.cancelable) e.stopPropagation();
 //  if (window.event) event.cancelBubble = true;
}


function buildMap() {

  var g = google.maps;

  var data = [ // Data of points and coords of sprite icons
   { name:"Germany", lat:"51.179342", lng:"10.50292", top: 64, left: 32, img:"image01", descr:"This is my text 1" },
   { name:"Netherlands", lat:"52.54963", lng:"6.29516", top: 0, left: 0, img:"image02", descr:"This an other text 2" },
   { name:"Belgium", lat:"50.84854", lng:"4.3517", top: 96, left: 0, img:"image03", descr:"This an other text 3" },
   { name:"France", lat:"46.69466", lng:"2.48291", top: 32, left: 0, img:"image04", descr:"This an other text 4" },
   { name:"Austria", lat:"47.591346", lng:"14.545898", top: 0, left: 32, img:"image05", descr:"This an other text 5" },
   { name:"Madrid", lat:"40.464774", lng:"-3.696540", top: 0, left: 32, img:"image04", descr:"This an other text 6" }
  ];

  var opts_map = {
    center: new g.LatLng(50, 8),
    zoom: 5,
    mapTypeId: g.MapTypeId.ROADMAP,
    scaleControl: true,
    streetViewControl: false,

   mapTypeControlOptions: {
    mapTypeIds: [ g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE, g.MapTypeId.TERRAIN]
   }
  };
  map = new g.Map(document.getElementById("map"), opts_map);
  iw = new g.InfoWindow();

  // v2 behaviour
  g.event.addListener(map, "click", function() {
    if (iw) iw.close();
//  alert("map click triggered");
  });

  // Load all markers
  for (var i = 0, n; n = data[i]; i++) {
   var point = new g.LatLng(parseFloat(n.lat), parseFloat(n.lng));
   createMarker(point, n.top, n.left, n.name, i, n.img, n.descr);
  }

}

window.onload = buildMap;