Question

我有一个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循环来初始化每个，但这不起作用。

Answer 1

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

示例：

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

Answer 2

一个功能怎么样？

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);

Answer 3

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

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 / url的数组，它们将在使用后从内存中删除，如果你需要再次引用它们，你可以将它们设为全局但除非你必须，我不会 - 我认为无论如何，数据可以从位置数组中的对象引用。

另外 - 没有理由说URL不能存放在存储lat / long数据的对象中，另一个答案就是这样的，我把它写出来是为了可读性，但它确实是个人选择。

如何摆脱Javascript中的重复行？

3 个答案: