javascript - Google map 中心和信息窗口

Question

如果这个问题在其他地方得到了回答，我很抱歉，但是当我向我的 map 添加一个监听器时，它会导致我的标记隐藏/不加载，所以有人可以解释如何在点击时加载信息窗口和中心到标记吗？

到目前为止，这是我的代码:

<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>
function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '600px';
  mapcanvas.style.width = '100%';
  document.querySelector('article').appendChild(mapcanvas);

  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 12,
    //center: coords,
    center: new google.maps.LatLng(51.416741,-0.543854),
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  // Geolocation
  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
      title:"You are here!",
  });

  // Great Fosters
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.416741,-0.543854),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
      title:"Great Fosters",
  });

  // St Matthews
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.432327,-0.459162),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/orange-dot.png',
      title:"St Matthews",
  });

  // ----- STAINES HOTELS - START -----
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.435698,-0.514469),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"Travel Lodge Staines",
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.432156,-0.51617),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"Thames Lodge Staines",
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.43218,-0.516293),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"The Boleyn Staines",
  });

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.432534,-0.516422),
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
      title:"The Swan Staines",
  });
  // ----- STAINES HOTELS - END -----

}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
</section>

编辑:

我现在更改了我的代码以包含数组并且它工作得很好但现在我希望标记在单击时位于 map 中心并且我希望所有标记都在窗口中但 fitBounds 似乎没有做任何事物。可以在这里显示http://www.everythingcreative.co.uk/marker

<section id="wrapper">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<article>
</article>
<script>

  var markers = [
    ['Great Fosters', 51.416741,-0.543854, 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'],
    ['St Matthews', 51.432327,-0.459162, 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'],
    // Staines
    ['Travel Lodge Staines', 51.435698,-0.514469, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['Thames Lodge Staines', 51.432156,-0.51617, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['The Boleyn Staines', 51.43218,-0.516293, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['The Swan Staines', 51.432534,-0.516422, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    // Surrey
    ['The Runnymede Hotel', 51.43751,-0.537544, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['The Wheatsheaf Hotel', 51.409151,-0.592704, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['The Premier Inn Sunbury', 51.419322,-0.42248, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['The Crown Chertsey', 51.39181,-0.501861, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    // Heathrow
    ['Sofitel Heathrow', 51.473478,-0.49152, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['Marriott Heathrow', 51.481263,-0.438209, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'],
    ['Premier Inn Heathrow', 51.481615,-0.482288, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png']
];

function success(position) {
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcontainer';
  mapcanvas.style.height = '600px';
  mapcanvas.style.width = '100%';
  document.querySelector('article').appendChild(mapcanvas);

  var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var options = {
    zoom: 12,
    //center: coords,
    center: new google.maps.LatLng(51.416741,-0.543854),
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  // Marker Control
  var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: markers[i][3]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

function AutoCenter() {
//  Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
//  Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
//  Fit these bounds to the map
map.fitBounds(bounds);
}

  // Geolocation
  var GeoMarker = new google.maps.Marker({
      position: coords,
      map: map,
      icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
      title:"You are here!",
  });


}
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}
</script>
</section>

Answer 1

要在单击标记时将 map 置于标记的中心，请更改代码以执行此操作:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        // center on marker
        map.setCenter(marker.getPosition());
        // open the infowindow
        infowindow.setContent(markers[i][0]);
        infowindow.open(map, marker);
    }
})(marker, i));

要使 fitBounds 起作用，您必须将 .extend 方法传递给 google.maps.LatLng 对象。鉴于您现有的代码，最简单的方法是将其放入“标记控件”循环中:

var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: markers[i][3]
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
map.fitBounds(bounds);