Question

我已经按照Google API教程创建了一些简单的地图。使用的代码如下所示，阵列中只有两个标记，但使用的更多。由于某些标记在地图上靠得很近，我想将标记读入选择/选项下拉菜单，因此除了能够点击标记外，还可以通过名称“cave：”选择标记。我还没有找到办法做到这一点。这可能吗？

还有一种方法可以在打开新信息时关闭之前的信息窗口吗？

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&amp;sensor=false"></script>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    var markers = [
    { lat: 51.589994, lng: -4.112497, cave: "Cat Hole Cave", name: "<h2>Cat Hole Cave</h2><img src='http://www.ogof.org.uk/Pictures/Entrances/1118.jpg' width='200' height='150'><br><h3><A href='http://www.cambriancavingcouncil.org.uk/registry/ccr_registry_view.php?ID=1118' target=_blank>Cambrian Cave Registry Entry</A><br><br>SS 53757 90020<br>Altitude 51m<br>Length 30m</h3>", site: "blue_cave.png"},
    { lat: 51.564564, lng: -4.274611, cave: "Mewslade Quarry Cave - Left", name: "<h2>Mewslade Quarry Cave - Left Entrance</h2><img src='http://www.ogof.org.uk/Pictures/Entrances/1570.jpg' width='200' height='150'><br><h3><A href='http://www.cambriancavingcouncil.org.uk/registry/ccr_registry_view.php?ID=1570' target=_blank>Cambrian Cave Registry Entry</A><br><br>SS 42440 87530<br>Altitude TBCm<br>Length 10m<br><br>Photo courtesy of Gary Evans</h3>", site: "blue_cave.png" },
];

for (index in markers) addMarker(markers[index]);
function addMarker(data) {

    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(data.lat, data.lng),
    map: map,
    title: data.cave,
    icon: data.site
  });     
  var content = document.createElement("DIV");
  var title = document.createElement("DIV");
  title.innerHTML = data.name;
  content.appendChild(title);
  var infowindow = new google.maps.InfoWindow({
  content: content,
  maxWidth: 180
    });

  google.maps.event.addListener(marker, "click", function() {
  infowindow.open(map, marker);
  });
}
var bounds = new google.maps.LatLngBounds();
    for (index in markers) {
      var data = markers[index];
      bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }
    map.fitBounds(bounds);
  }   
</script>
</head>
<body onload="initialize()">
<div id="map-canvas"></div>
</body>

这是目前正常工作的页面链接。 http://www.ogof.org.uk/Gower-Cave-Location-Map.html

在Google Maps v3上为标记创建“选择”下拉菜单

0 个答案: