google maps api v3: добавить точку на полилинии между двумя существующими точками на событии полилинии клика - PullRequest
Новая
       31

google maps api v3: добавить точку на полилинии между двумя существующими точками на событии полилинии клика

4 голосов
/ 20 августа 2010

Как добавить точку на полилинии между двумя существующими точками в событии полилинии клика?Спасибо!

Ответы [ 2 ]

6 голосов
/ 23 августа 2010

Если вы просто говорите о Polyline только с 2 точками, вы можете использовать центр LatLngBounds, содержащий Polyline. Google maps api v3 не поддерживает функцию Polyline.getBounds(). Таким образом, вы можете расширить класс Polyline, включив в него функцию getBounds: 

google.maps.Polyline.prototype.getBounds = function() {
  var bounds = new google.maps.LatLngBounds();
  this.getPath().forEach(function(e) {
    bounds.extend(e);
  });
  return bounds;
};

Polyline.getBounds() на линии, содержащей только 2 точки, будет содержать область для включения этой линии. Центр этих границ должен быть точным центром вашей линии. Если Polyline включает в себя более 2 точек, центр будет располагаться не по центру нажатой линии, а по центру границ, который включает все точки. Если вы хотите использовать многосегментные полилинии с этой функцией, потребуется больше математики, чтобы вычислить, какой сегмент был нажат.

Вот небольшой пример, использующий 2 точки Polyline: 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Right in Two</title>

    <style type="text/css">
      #map-canvas {
        height: 500px;
      }
    </style>

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
    <script type="text/javascript">

      function init() {
        var mapDiv = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.790234970864, -122.39031314844),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var points = [
                  new google.maps.LatLng(40.785533,-124.16748),
                  new google.maps.LatLng(32.700413,-115.469971)
        ];

        var line = new google.maps.Polyline({
          map: map,
          path: points,
          strokeColor: "#FF0000",
          strokeWeight: 2,
          strokeOpacity: 1.0
        });

        google.maps.Polyline.prototype.getBounds = function() {
          var bounds = new google.maps.LatLngBounds();
          this.getPath().forEach(function(e) {
            bounds.extend(e);
          });
          return bounds;
        };

        google.maps.event.addListener(line, 'click', function(e){
          var marker = new google.maps.Marker({
            map: map,
            position: line.getBounds().getCenter()
          });
        });

      };

      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
0 голосов
/ 17 апреля 2011

вам просто нужно рассчитать азимут и 50% расстояния - добавьте туда вертикалку.

приведенный выше пример - центр границы, который идентичен.

вам может понадобиться временный граничный объект, который расширяет границы на предыдущую и следующую вертикалю.

...