0

我有一个 Javascript 文件，它向自定义 Google 地图添加标记，这是我拥有的代码：

var locations = [
    // Bloor Station
    new google.maps.Marker({
      position: new google.maps.LatLng(43.670231, -79.386821),
      url: "http://www.youtube.com/watch?v=NX7QNWEGcNI",
      map: map,
      icon: image
    }),
    // Castle Frank Bridge
    new google.maps.Marker({
      position: new google.maps.LatLng(43.674759, -79.366643),
      url: "http://www.youtube.com/watch?v=NX7QNWEGcNI",
      map: map,
      icon: image
    }),
// Simeon Park
new google.maps.Marker({
  position: new google.maps.LatLng(43.792333395471275, -79.38898265361786),
  url: "http://www.youtube.com/watch?v=NX7QNWEGcNI",
  map: map,
  icon: image
}),

对于我拥有的每个位置，它都会继续这样。

我遇到的问题是我为每个标记使用相同的地图和图像；此外，我还想将其他变量添加到所有位置，而不必为每个标记编写同一行；随着位置的增加，重复的线条也会增加，这可能会很痛苦。

总而言之，我的问题是：我如何才能摆脱这些重复的线条？

在声明每个 URL 和位置后，我尝试运行一个 for 循环来初始化每个，但这不起作用。

4

3 回答 3

3

您可以创建一个辅助函数来创建一个新的 Marker 对象，为其分配值，然后将其推送到位置数组。

例子：

var locations = [];

function addMarker(lat, long, url) {

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    url: url,
    map: map,
    icon: image
  });

  locations.push(marker);

}

然后调用 addMarker 添加一个新的标记

addMarker(43.792333395471275, -79.38898265361786, "url");
于 2013-05-19T17:40:33.123 回答
1

函数呢？

var createLocationMarker = function(lat, lng, ytId) {
  return new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    url: "http://www.youtube.com/watch?v=" + ytId,
    map: map,
    icon: image
  })
};

var createLocations = function(locations) {
  var markers = [];
  for (var i = locations.length; i > 0; --i) {
    var l = locations[i];
    markers.push(createLocationMarker(l.lat, l.lng, l.yt));
  }
  return markers;
};

// static declaration, or result of an ajax request:
var locations = [
  { lat: 43.670231, lng: -79.386821, yt: 'NX7QNWEGcNI' }, // Bloor Station
  { lat: 43.674759, lng: -79.366643, yt: 'NX7QNWEGcNI' }, // Castle Frank Bridge
  { } // ...
];

var markers = createLocations(locations);
于 2013-05-19T17:43:57.493 回答
0

我自己没有使用谷歌地图，但看着它，你可以做这样的事情：

var locations = [];

function addLocations(){

//NB I just copied the first value to save time, you'll need to swap the second 
//and third out for the values you need:

//Positions
var posits = [
{lat: 43.670231, lon: -79.386821},
{lat: 43.670231, lon: -79.386821},
{lat: 43.670231, lon: -79.386821}
];

//URLs
var urls = [
"http://www.youtube.com/watch?v=NX7QNWEGcNI",
"http://www.youtube.com/watch?v=NX7QNWEGcNI",
"http://www.youtube.com/watch?v=NX7QNWEGcNI"
];

//Now, use a loop to create the locations:

for(var i = 0; i < 3; i++){

    //Place in array using values in arrays above:
    locations[i] = new google.maps.Marker({
    position: new google.maps.LatLng(posits[i].lat, posits[i].lon),
    url: urls[i],
    map: map,
    icon: image
    });

}

}

//Invoke function when desired
addLocations();

如果您将 posits/urls 的数组保留在函数中，它们将在使用后从内存中删除，如果您需要再次引用它们，您可以将它们设为全局，但除非您必须这样做，否则我不会 - 我认为数据可以无论如何都要从位置数组中的对象中引用。

另外 - 没有理由 URL 不能位于存储纬度/经度数据的对象内，另一个答案是这样的，我写出来是为了便于阅读，但这真的是个人选择。

于 2013-05-19T17:46:36.100 回答