javascript - 使用多个标记和谷歌地图 api 的中心 map

Question

目前使用下面的 JS 绘制了一张带有两个标记的 map ，但是本地图加载时，当标记位于特定位置时它无法正确居中......我相当确定这是一个简单的错误但无法发现它

[var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls\[google.maps.ControlPosition.TOP_CENTER\].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: <?php echo $Lat1; ?>, lng: <?php echo $Long1; ?>}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: <?php echo $Lat2; ?>, lng: <?php echo $Long2; ?>}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);


  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  /*geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });*/

  update();
}

function update() {
  var path = \[marker1.getPosition(), marker2.getPosition()\];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path\[0\], path\[1\]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path\[0\].toString();
  document.getElementById('destination').value = path\[1\].toString()https://stackoverflow.com/editing-help;
}]

图片:http://tinypic.com/r/29q01g4/9

Answer 1

google.maps.LatLngBounds构造函数需要两个 google.maps.LatLng特定顺序的对象:西南 Angular 、东北 Angular 。

LatLngBounds(sw?:LatLng|LatLngLiteral, ne?:LatLng|LatLngLiteral)

Constructs a rectangle from the points at its south-west and north-east corners.

所以这是不正确的(除非标记之间的关系恰好是正确的):

var bounds = new google.maps.LatLngBounds(
   marker1.getPosition(), 
   marker2.getPosition());
map.fitBounds(bounds);

如果您想向 google.maps.LatLngBounds 添加两个任意位置，请创建一个空边界，然后用这两个位置扩展它:

var bounds = new google.maps.LatLngBounds();
bounds.extend(marker1.getPosition());
bounds.extend(marker2.getPosition())
map.fitBounds(bounds);

proof of concept fiddle

代码片段:

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 34,
      lng: -40.605
    }
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
    document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {
      lat: 40.7127837,
      lng: -74.0059413
    }
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {
      lat: 40.735657,
      lng: -74.1723667
    }
  });

  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.getPosition());
  bounds.extend(marker2.getPosition())
  map.fitBounds(bounds);


  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<input id="heading" />
<input id="origin" />
<input id="destination" />
<div id="map"></div>