Google Maps API有几个信息框

时间:2014-02-08 10:25:36

标签: javascript google-maps-api-3

有没有一种简单的方法可以运行创建信息框x5次的代码而无需复制粘贴相同的代码5次?

var infotekst = "Blok 5 - 6";

            var infoboxOptions = {
                content: infotekst,
                boxStyle: {
                    border: "2px solid black",
                    textAlign: "center",
                    fontSize: "10pt",
                    fontWeight: "bold",
                    width: "70px",
                    background: "#CEF6F5"
                },
                position: new google.maps.LatLng(55.836587, 9.513433),
                closeBoxURL: "",
                disableAutoPan: true,
                isHidden: false,
                enableEventPropagation: true
            };
            var ibLabel = new InfoBox(infoboxOptions);
            ibLabel.open(map);

我想在每次运行时更改坐标和内容。

此致

1 个答案:

答案 0 :(得分:0)

也许您可以通过以下方式完成,它有点长但可以配置,如果将来需要可以添加更多配置:

function createInfoBoxes(args) {
  args = args || {};
  //locationContent is an array of object that has to be passed
  if (Object.prototype.toString.call(args.locationContent) 
    !== '[object Array]')
      throw new Error("Have to pass locationContent as array.");
  //shortcut to args.locationContent named data
  var data = args.locationContent,
  //setup i and len to loop through data (args.locationContent)
  i = -1, len = data.length,
  //use passed boxOptions or default value when not passed
  boxOptions = args.boxOptions ||
  {
    content: null,
    boxStyle: {
      border: "2px solid black",
      textAlign: "center",
      fontSize: "10pt",
      fontWeight: "bold",
      width: "70px",
      background: "#CEF6F5"
    },
    position: null,
    closeBoxURL: "",
    disableAutoPan: true,
    isHidden: false,
    enableEventPropagation: true
  },
  //ret is return value, an array of InfoBox instances
  ret = [], tmp;
  while (++i < len) {
    boxOptions.position = 
      new google.maps.LatLng(data[i].lat
      , data[i].lng);
    boxOptions.content=data[i].content;
    tmp = new InfoBox(boxOptions);
    tmp.open(map);
    ret.push(tmp);
  }
  return ret;
}
;

//sample using the default boxOptions
createInfoBoxes({
  locationContent: [
    {lat:55.836587,lng:9.513433,content:"Box 1"},
    {lat:56.836587,lng:9.513433,content:"Box 2"},
    {lat:57.836587,lng:9.513433,content:"Box 3"}
  ]
});
//sample overriding box options
createInfoBoxes({
  locationContent: [
    {lat:55.836587,lng:9.513433,content:"Box 1"},
    {lat:56.836587,lng:9.513433,content:"Box 2"},
    {lat:57.836587,lng:9.513433,content:"Box 3"}
  ],
  boxOptions : {
    content: null,
    boxStyle: {
      border: "2px solid black",
      textAlign: "center",
      fontSize: "10pt",
      fontWeight: "bold",
      width: "70px",
      background: "#CEF6F5"
    },
    position: null,
    closeBoxURL: "",
    disableAutoPan: true,
    isHidden: false,
    enableEventPropagation: true
  }
});