谷歌地图绘制两个圆弧

时间:2018-12-12 11:32:35

标签: google-maps google-maps-api-3

您好,我有两个半径相交的圆。 我想绘制一般交叉点的弧线。

1个圆-相交点  纬度:42.685896573405,Lng:23.317402717551-一分  纬度:42.633574598298,Lng:23.311314291808-两点  半径:3212 m。

2个圆-相交点 纬度:42.685896573405,Lng:23.317402717551-一分 纬度:42.633574598298,Lng:23.311314291808-两点 半径:4919 m。

以圆1为中心-42.660786 23.297769-以圆2为中心-42.662789 23.266027

1 个答案:

答案 0 :(得分:0)

相关问题:

// Circle - intersecting point Lat:42.685896573405, Lng: 23.317402717551 - One point Lat:42.633574598298, Lng: 23.311314291808 - Two point Radius:3212 m.
// Center on circle 1 - 42.660786 23.297769 - Center on circle 2 - 42.662789 23.266027
var pointA = new google.maps.LatLng(42.685896573405, 23.317402717551);
var center1 = new google.maps.LatLng(42.660786,23.297769);

// Circle - intersecting point Lat:42.685896573405, Lng: 23.317402717551 - One point Lat:42.633574598298, Lng: 23.311314291808 - Two point Radius:4919 m
// Center on circle 1 - 42.660786 23.297769 - Center on circle 2 - 42.662789 23.266027
var pointB = new google.maps.LatLng(42.633574598298, 23.311314291808);
var center2 = new google.maps.LatLng(42.662789, 23.266027);

var arc1 = new google.maps.Polyline({
  map: map,
  path: drawArc(center1, google.maps.geometry.spherical.computeHeading(center1, pointA),
    google.maps.geometry.spherical.computeHeading(center1, pointB), 3212),
  strokeColor: "blue"
})
var arc2 = new google.maps.Polyline({
  map: map,
  path: drawArc(center2, google.maps.geometry.spherical.computeHeading(center2, pointA),
    google.maps.geometry.spherical.computeHeading(center2, pointB), 4919),
  strokeColor: "red"
})

交叉点: proof of concept fiddle

screenshot of resulting map

联盟: proof of concept fiddle

screenshot of resulting map

代码段(交叉点):

function initMap() {
  bounds = new google.maps.LatLngBounds();
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  // Circle - intersecting point Lat:42.685896573405, Lng: 23.317402717551 - One point Lat:42.633574598298, Lng: 23.311314291808 - Two point Radius:3212 m.
  // Center on circle 1 - 42.660786 23.297769
  var pointA = new google.maps.LatLng(42.685896573405, 23.317402717551);
  var center1 = new google.maps.LatLng(42.660786, 23.297769);

  // Circle - intersecting point Lat:42.685896573405, Lng: 23.317402717551 - One point Lat:42.633574598298, Lng: 23.311314291808 - Two point Radius:4919 m
  // Center on circle 2 - 42.662789 23.266027
  var pointB = new google.maps.LatLng(42.633574598298, 23.311314291808);
  var center2 = new google.maps.LatLng(42.662789, 23.266027);

  var arc1 = new google.maps.Polyline({
    map: map,
    path: drawArc(center1, google.maps.geometry.spherical.computeHeading(center1, pointA),
      google.maps.geometry.spherical.computeHeading(center1, pointB), 3212),
    strokeColor: "blue"
  });
  var arc2 = new google.maps.Polyline({
    map: map,
    path: drawArc(center2, google.maps.geometry.spherical.computeHeading(center2, pointA),
      google.maps.geometry.spherical.computeHeading(center2, pointB), 4919),
    strokeColor: "red"
  });
  map.fitBounds(bounds);
}
// from http://en.wikipedia.org/wiki/Earth_radius
/*
/ Equatorial radius
/ The Earth's equatorial radius a, or semi-major axis, is the distance from its center to the equator and equals 6,378.1370 km (?3,963.191 mi; ?3,443.918 nmi).
*/
var EarthRadiusMeters = 6378137.0; // meters
var bounds;

function drawArc(center, initialBearing, finalBearing, radius) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 

  var points = 128;

  // find the raidus in lat/lon 
  var rlat = (radius / EarthRadiusMeters) * r2d;
  var rlng = rlat / Math.cos(center.lat() * d2r);

  var extp = new Array();

  if (initialBearing > finalBearing) finalBearing += 360;
  var deltaBearing = finalBearing - initialBearing;
  deltaBearing = deltaBearing / points;

  for (var i = 0;
    (i < points + 1); i++) {
    extp.push(google.maps.geometry.spherical.computeOffset(center, radius, initialBearing + i * deltaBearing));
    bounds.extend(extp[extp.length - 1]);
  }
  return extp;
}
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>