Длина полилинии GoogleMaps в V3

Question

Кажется, больше нет функции длины для Полилинии в Картах Google в V3.

Кто-нибудь нашел решение этой проблемы?

Answer 1

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true"></script>
... var path = poly.getPath(); // or:
var path = polygon.getPath(); 
... = google.maps.geometry.spherical.computeLength(path.getArray())
... = google.maps.geometry.spherical.computeArea(path.getArray())

-> расстояние для полилинии, площадь для многоугольника

и между двумя точками: computeDistanceBetween ()

Не забудьте указать библиотеку геометрии (библиотеки = геометрия)

http://code.google.com/apis/maps/documentation/javascript/geometry.html

Answer 2

вот прототипы для требуемой функции - надеюсь, это поможет еще дальше:

google.maps.Polygon.prototype.Distance = function() {
   var dist = 0;
   for (var i=1; i < this.getPath().getLength(); i++) {
      dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i-1));
   }
   return dist;
}

google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
    //var R = 6371; // km (change this constant to get miles)
    var R = 6378100; // meters
    var lat1 = this.lat();
    var lon1 = this.lng();
    var lat2 = newLatLng.lat();
    var lon2 = newLatLng.lng();
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
      Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
      Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;
    return d;
}

источник

Answer 3

Это должно быть сделано сегмент за сегментом.

См. эту группу Google Maps JavaScript API v3 сообщение для предлагаемого решения.

Answer 4

В библиотеке геометрии Google Maps Javascript API v3 * 3 * теперь есть метод для вычисления расстояния между двумя google.maps.LatLng объектами в метрах google.maps.geometry.spherical.computeDistanceBetween.

И метод в библиотеке геометрии API Карт Google v3 v3 для вычисления длины полилинии google.maps.geometry.poly.computeLength.

Концепция из публикации Google Maps JavaScript API v3 группы , на которую ссылается ответ Хэмиша , но с использованием метода библиотеки геометрии API JavaScript Google Maps v3 computeDistanceBetween :

google.maps.Polyline.prototype.inKm = function(n) {
  var a = this.getPath(n),
    len = a.getLength(),
    dist = 0;
  for (var i = 0; i < len - 1; i++) {
    dist += google.maps.geometry.spherical.computeDistanceBetween(a.getAt(i), a.getAt(i + 1));
  }
  return dist / 1000;
}

Результат - длина полилинии в километрах. Необязательный Параметр - индекс пути многолинейных полилиний.

подтверждение концепции скрипки

Использование computeLength:

google.maps.geometry.spherical.computeLength(poly.getPath())/1000

подтверждение концепции скрипки

фрагмент кода:

var map;
var poly;
var gmarkers = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, 'click', addLatLng);
  var polyCoord = [
    new google.maps.LatLng(41.86, 8.73),
    new google.maps.LatLng(41.88, 8.75)
  ];
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(polyCoord[0]);
  bounds.extend(polyCoord[1]);
  map.fitBounds(bounds);
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    map.setZoom(map.getZoom() - 2);
  });
  // Polyline
  poly = new google.maps.Polyline({
    path: polyCoord
  });
  poly.binder = new MVCArrayBinder(poly.getPath());
  var marker0 = new google.maps.Marker({
    position: event.latLng,
    title: '#0',
    map: map,
    icon: {
      path: 'M256,320c-70.688,0-128-57.312-128-128c0-70.687,57.313-128,128-128c70.688,0,128,57.313,128,128C384,262.688,326.688,320,256,320z',
      fillColor: 'white',
      fillOpacity: 1,
      scale: 0.025,
      strokeColor: 'black',
      strokeWeight: 1,
      strokeOpacity: 1,
      anchor: new google.maps.Point(200, 200)
    },
    draggable: true
  });
  marker0.bindTo('position', poly.binder, (0).toString());
  google.maps.event.addListener(marker0, 'dragend', updateLength);
  gmarkers.push(marker0);
  var marker1 = new google.maps.Marker({
    position: event.latLng,
    title: '#1',
    map: map,
    icon: {
      path: 'M256,320c-70.688,0-128-57.312-128-128c0-70.687,57.313-128,128-128c70.688,0,128,57.313,128,128C384,262.688,326.688,320,256,320z',
      fillColor: 'white',
      fillOpacity: 1,
      scale: 0.025,
      strokeColor: 'black',
      strokeWeight: 1,
      strokeOpacity: 1,
      anchor: new google.maps.Point(200, 200)
    },
    draggable: true
  });
  marker1.bindTo('position', poly.binder, (1).toString());
  google.maps.event.addListener(marker1, 'dragend', updateLength);
  gmarkers.push(marker1);
  poly.setMap(map);
  updateLength();
}

function updateLength() {
  document.getElementById('length').value = (google.maps.geometry.spherical.computeLength(poly.getPath()) / 1000).toFixed(2);
};
google.maps.event.addDomListener(window, "load", initialize);

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {MouseEvent} mouseEvent
 */
function addLatLng(event) {
  var path = poly.getPath();
  path.push(event.latLng);
  var len = path.getLength();
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + len,
    map: map,
    icon: {
      path: 'M256,320c-70.688,0-128-57.312-128-128c0-70.687,57.313-128,128-128c70.688,0,128,57.313,128,128C384,262.688,326.688,320,256,320z',
      fillColor: 'white',
      fillOpacity: 1,
      scale: 0.025,
      strokeColor: 'black',
      strokeWeight: 1,
      strokeOpacity: 1,
      anchor: new google.maps.Point(200, 200)
    },
    draggable: true
  });
  gmarkers.push(marker);
  marker.bindTo('position', poly.binder, (len - 1).toString());
  google.maps.event.addListener(marker, 'dragend', updateLength);
  document.getElementById('length').value = poly.inKm().toFixed(2);
}

/*
 * Use bindTo to allow dynamic drag of markers to refresh poly.
 */

function MVCArrayBinder(mvcArray) {
  this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
  if (!isNaN(parseInt(key))) {
    return this.array_.getAt(parseInt(key));
  } else {
    this.array_.get(key);
  }
}
MVCArrayBinder.prototype.set = function(key, val) {
  if (!isNaN(parseInt(key))) {
    this.array_.setAt(parseInt(key), val);
  } else {
    this.array_.set(key, val);
  }
}

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<label>polyline length (km):</label>
<input id="length" type="text" />
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Answer 5

Я искал ту же информацию и обнаружил, что искомый вызов API находится в пространстве имен geometry.spherical.

Вот код, который я использую:

//Path is the mvc array of lat/lng that makes up the polyline
var path = $scope.courseLine.getPath();

$scope.totalDistance = google.maps.geometry.spherical.computeLength(path);
$scope.totalMiles = ($scope.totalDistance * 0.00062137).toFixed(2) + " mi";
                });

Answer 6

Если вы получили полилинию от DirectionsService, проверьте расстояние и продолжительность в DirectionsLeg.

https://developers.google.com/maps/documentation/javascript/reference#DirectionsLeg

Answer 7

Получите расстояние между двумя подключаемыми широтами, используя формулу haversine