Question

目前使用下面的JS使用两个标记绘制地图，但是当地图加载时，当标记位于特定位置时，它不能正确居中...我很确定这是一个简单的错误，但无法发现它< / p>

[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个对象：SouthWest，NorthEast corner。

LatLngBounds（sw？：LatLng | LatLngLiteral，ne？：LatLng | LatLngLiteral）

从其西南角和东北角的点构造一个矩形。

所以这是不正确的（除非标记碰巧彼此正确）：

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>

中心地图使用多个标记和谷歌地图API

1 个答案: