Google maps a.lat is not a function.

问题

This is my first time working with the javascript google maps api and I keep getting an this error when I try to LatLngBounds.extend() Uncaught TypeError: a.lat is not a function

I have been able to get and average of all the coordinates and move the camera to that location but I want to be able to dynamically adjust the zoom to fit everything. I do not get the error when i comment out the line bounds.extend(myLatLng) in the for loop.

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });

  var avLat = 0;
  var avLon = 0;
  var pathCoords = [];

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0, len = data.length; i < len; i++) {
    var myLatLng = {lat: parseFloat(data[i].Lat), lng: parseFloat(data[i].Lon)};
    pathCoords.push(myLatLng);
    bounds.extend(myLatLng);
    avLat += parseFloat(data[i].Lat);
    avLon += parseFloat(data[i].Lon);
  }

  var path = new google.maps.Polyline({
    path: pathCoords,
    geodesic: true,
    strokeColor: '#0000FF',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  path.setMap(map);
  avLat = avLat/data.length;
  avLon = avLon/data.length;

    map.fitBounds(bounds);
  // map.setCenter({lat: avLat, lng: avLon});
  // map.setZoom(12);

}

回答1:

You can't use a google.maps.LatLngLiteral in the google.maps.LatLngBounds.extend method, you have to convert it into a google.maps.LatLng object (at least for now).

code snippet:

var geocoder;
var map;
var data = [{
  Lat: -34.397,
  Lon: 150.644
}, {
  Lat: -34,
  Lon: 150
}];

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });

  var avLat = 0;
  var avLon = 0;
  var pathCoords = [];

  var bounds = new google.maps.LatLngBounds();

  for (var i = 0, len = data.length; i < len; i++) {
    var myLatLng = new google.maps.LatLng(parseFloat(data[i].Lat), parseFloat(data[i].Lon));
    pathCoords.push(myLatLng);

    bounds.extend(myLatLng);
    avLat += parseFloat(data[i].Lat);
    avLon += parseFloat(data[i].Lon);
  }

  var path = new google.maps.Polyline({
    path: pathCoords,
    geodesic: true,
    strokeColor: '#0000FF',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  path.setMap(map);
  avLat = avLat / data.length;
  avLon = avLon / data.length;

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

来源：https://stackoverflow.com/questions/37600543/google-maps-a-lat-is-not-a-function

标签

javascript

google-maps

google-maps-api-3