Question

我刚开始使用javascript，并且正在使用google maps api。我想使用按钮在地图上显示位置。我有不同的城堡，当单击每个城堡时，我要弹出与城堡相关的地图标记。我不确定用javascript做到这一点的最佳方法。任何帮助表示赞赏！目前，我在数组中具有城堡的所有位置，并且具有一些JavaScript，尽管它没有显示任何内容。

for (i = 0; i < castles.length; i++ ) {
  var addMarker = ("The lat is " + castles[i][1]+" and the long is "+ castles[i][2]);
  var marker = new google.maps.Marker({
    position: {lat: castles[1], lng: castles[2]},
    map: map
  });
}

Answer 1

好的，听起来您有一个城堡对象数组，但没有一个标记数组，所以让我们先修复它。（请注意，在您的示例中，您没有访问经纬度数组[i]中正确的元素。）

const markers = [];

for (let i = 0; i < castles.length; i++ ) {
  var marker = new google.maps.Marker({
    position: { lat: castles[i][1], lng: castles[i][2] },
    map: map
  });
  markers.push(marker);
}

我声明了一个新数组，以保留所有标记，并在每次迭代时将每个创建的标记推入其中。

要将它们添加到地图中，只需遍历标记数组并使用setMap：

markers.forEach((marker) => marker.setMap(map));

但是您还希望在单击任何标记时显示一个信息窗口，所以让我们返回并修改该循环：

const markers = [];

for (let i = 0; i < castles.length; i++ ) {

  // Cache the lat and lng coords
  const lat = castles[i][1];
  const lng = castles[i][2];

  // Create a new infowindow
  const infowindow = new google.maps.InfoWindow({

    // Using your content we can create a template literal string
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
    content: `The lat is ${lat} and the long is ${lng}`
  });

  const marker = new google.maps.Marker({
    position: { lat, lng },
    map: map
  });

  // And we add a listener to the marker so that
  // it opens the infowindow when it is clicked
  marker.addListener('click', () => {
    infowindow.open(map, marker);
  });

  markers.push(marker);
}

Answer 2

尝试一下：

position: {lat: castles[i][1], lng: castles[i][2]}

使用按钮在地图上显示相关的位置地图标记

2 个答案: