两点之间的Google Map Curve路线更长

时间:2019-05-24 17:00:53

标签: javascript google-maps

我指的是Adding icon in the middle of created SVG path in Google Maps在两点之间画一条曲线:一个点靠近西雅图,另一个点在东京。曲线将2点连接通过非洲/大西洋,而不是太平洋。我该如何解决?这是jsfiddle页面:https://jsfiddle.net/zwu_ca/nj325pcr/1/

    var map;
var curvature = 0.175;
var invercurve = -0.175;

function initMap() {

   var Map = google.maps.Map,
    LatLng = google.maps.LatLng,
    LatLngBounds = google.maps.LatLngBounds,
    Marker = google.maps.Marker,
    Point = google.maps.Point;

  var pos1 = new LatLng(35.6730185, 139.4302008);
  var pos2 = new LatLng(47, -122);

  var bounds = new LatLngBounds();
  bounds.extend(pos1);
  bounds.extend(pos2);

  map = new Map(document.getElementById('container'), {
    center: bounds.getCenter(),
    zoom: 2
  });
  google.maps.event.addListener(map, 'click', function(evt) {
    document.getElementById('status').innerHTML = evt.latLng.toUrlValue(6);
  });
  map.fitBounds(bounds);

  var markerP1 = new Marker({
    position: pos1,
    map: map
  });
  var markerP2 = new Marker({
    position: pos2,
    map: map
  });

  var curveMarker, curveMarkerInv;

  function updateCurveMarker() {
    var pos1 = markerP1.getPosition(), // latlng
      pos2 = markerP2.getPosition(),
      projection = map.getProjection(),
      p1 = projection.fromLatLngToPoint(pos1), // xy
      p2 = projection.fromLatLngToPoint(pos2);

    var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
      m = new Point(e.x / 2, e.y / 2), // midpoint
      mPt = projection.fromPointToLatLng(m);
    console.log(mPt.toUrlValue(6));

    var mMkr = new google.maps.Marker({
      position: mPt,
      map: map,
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 2
      }
    });
    o = new Point(e.y, -e.x), // orthogonal
      c = new Point( // curve control point
        m.x + curvature * o.x,
        m.y + curvature * o.y);
    var c2 = new Point(
      c.x + p1.x - curvature * o.x * 0.5,
      c.y + p1.y - curvature * o.y * 0.5
    );

    var aPt = projection.fromPointToLatLng(c2);
    console.log(aPt.toUrlValue(6));

    var aMkr = new google.maps.Marker({
      position: aPt,
      map: map,
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        rotation: lineHeading,
        scale: 2
      }
    });

    var f = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
      n = new Point(f.x / 2, f.y / 2), // midpoint
      p = new Point(f.y, -f.x), // orthogonal
      d = new Point( // curve control point
        n.x + invercurve * p.x,
        n.y + invercurve * p.y);
    var d2 = new Point(
      d.x + p1.x - invercurve * p.x * 0.5,
      d.y + p1.y - invercurve * p.y * 0.5
    );
    var bPt = projection.fromPointToLatLng(d2);
    console.log(aPt.toUrlValue(6));
    var bMkr = new google.maps.Marker({
      position: bPt,
      map: map,
      icon: {
        path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
        rotation: lineHeading,
        scale: 2
      }
    });
    console.log('F:' + p1.x * curvature / 2 + ' ' + p1.y * curvature / 2);

    var pathDef = 'M 0,0 ' +
      'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;
    var pathDefInv = 'M 0,0 ' +
      'q ' + d.x + ',' + d.y + ' ' + f.x + ',' + f.y;

    var zoom = map.getZoom(),
      scale = 1 / (Math.pow(2, -zoom));

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng,
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 10
      },
      //draggable: true,
      map: map
    });

    var symbol = {
      path: pathDef,
      scale: scale,
      strokeWeight: 2,
      strokeColor: '#f00',
      fillColor: 'none'
    };

    var symbolInv = {
      path: pathDefInv,
      scale: scale,
      strokeWeight: 2,
      strokeColor: '#f00',
      fillColor: 'none'
    };

    if (!curveMarker) {
      curveMarker = new Marker({
        position: pos1,
        clickable: false,
        icon: symbol,
        zIndex: 0, // behind the other markers
        map: map
      });
      curveMarkerInv = new Marker({
        position: pos1,
        clickable: false,
        icon: symbolInv,
        zIndex: 0, // behind the other markers
        map: map
      });

    } else {
      curveMarker.setOptions({
        position: pos1,
        icon: symbol,
      });
      curveMarkerInv.setOptions({
        position: pos1,
        icon: symbolInv,
      });
    }
  }

  google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);
  google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);

  google.maps.event.addListener(markerP1, 'position_changed', updateCurveMarker);
  google.maps.event.addListener(markerP2, 'position_changed', updateCurveMarker);

  var lineLength = google.maps.geometry.spherical.computeDistanceBetween(markerP1.getPosition(), markerP2.getPosition());
  var lineHeading = google.maps.geometry.spherical.computeHeading(markerP1.getPosition(), markerP2.getPosition());


}

0 个答案:

没有答案