谷歌地图用圆弧画两个圆

Question

您好，我有两个半径相交的圆。 我想画出一般路口的弧线。

1 个圆 - 交点 纬度：42.685896573405，液化天然气：23.317402717551 - 一点 纬度：42.633574598298，液化天然气：23.311314291808 - 两点 半径：3212 米。

2 圆 - 交点 纬度：42.685896573405，液化天然气：23.317402717551 - 一点 纬度：42.633574598298，液化天然气：23.311314291808 - 两点 半径：4919 米。

圆心 1 - 42.660786 23.297769 - 圆心 2 - 42.662789 23.266027

Answer 1

相关问题：

• How to draw 2 concentric arcs in googlemap
• Draw circle's arc on google maps

// 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

联合： proof of concept fiddle

代码 sn-p（交叉点）：

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>