Question

我想在googlemap和仅颜色区域'B'中绘制2个同心圆弧。请参考图片

但是因为它显示我无法丢弃区域'A'。有人可以分享一些codenippet来实现这一目标。推荐How to split circle in to the sectors in google maps? 目前的实施。

function initialize() {
    var gm = google.maps, centerPt = new gm.LatLng(19.424949166667, 99.17041888889), map = new gm.Map(
            document.getElementById('map_container'), {
                mapTypeId : gm.MapTypeId.ROADMAP,
                zoom : 16,
                center : centerPt
            }), 

    slices = [ [ 30.0, 82.0, 'red' ],
    ], 
    polys = [], radiusMeters = [50,100];
    for(var j=0;j<radiusMeters.length;j++){
        for ( var i = 0; i < slices.length; i++) {
            var path = getArcPath(centerPt, radiusMeters[j], slices[i][0],
                    slices[i][1]);
            path.unshift(centerPt);
            path.push(centerPt);

            var poly = new gm.Polygon({
                path : path,
                map : map,
                fillColor : slices[i][2],
                fillOpacity : 0.35,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,

            });
            polys.push(poly);
        }// End of Inner for loop
    }// End of for loop
}

function getArcPath(center, radiusMeters, startAngle, endAngle,
        direction) {
    var point, previous, atEnd = false, points = Array(), a = startAngle;
    while (true) {
        point = google.maps.geometry.spherical.computeOffset(center,
                radiusMeters, a);
        points.push(point);
        if (a == endAngle) {
            break;
        }
        a++;
        if (a > 360) {
            a = 1;
        }
    }
    if (direction == 'counterclockwise') {
        points = points.reverse();
    }
    return points;
}

Answer 1

绘制2个弧并用折线连接它们：

var startPoint = new google.maps.LatLng(50.698129,13.982184);
var endPoint = new google.maps.LatLng(50.697748,13.999179);
var centerPoint = new google.maps.LatLng(50.68504754096478, 13.990276157855988);
var midStartLeg = google.maps.geometry.spherical.interpolate(centerPoint, startPoint, 0.5);
var midEndLeg = google.maps.geometry.spherical.interpolate(centerPoint, endPoint, 0.5);

var arcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint), -1.0);

var littleArcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, midStartLeg), -1.0);
littleArcPts = littleArcPts.reverse();
arcPts = arcPts.concat(littleArcPts);

var piePoly = new google.maps.Polygon({
  paths: [arcPts],
  strokeColor: "#00FF00",
  strokeOpacity: 0.5,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.35,
  map: map
});

proof of concept fiddle

代码段

function initialize() {
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(50.68681982238762, 14.000144215759285),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  bounds = new google.maps.LatLngBounds();

  google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng);
    infowindow.close();
  });


  var startPoint = new google.maps.LatLng(50.698129, 13.982184);
  var endPoint = new google.maps.LatLng(50.697748, 13.999179);
  var centerPoint = new google.maps.LatLng(50.68504754096478, 13.990276157855988);
  var midStartLeg = google.maps.geometry.spherical.interpolate(centerPoint, startPoint, 0.5);
  var midEndLeg = google.maps.geometry.spherical.interpolate(centerPoint, endPoint, 0.5);

  var arcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint), -1.0);
  bounds.extend(midEndLeg);
  var littleArcPts = drawArc(centerPoint, google.maps.geometry.spherical.computeHeading(centerPoint, startPoint), google.maps.geometry.spherical.computeHeading(centerPoint, endPoint), google.maps.geometry.spherical.computeDistanceBetween(centerPoint, midStartLeg), -1.0);
  littleArcPts = littleArcPts.reverse();
  arcPts = arcPts.concat(littleArcPts);
  // arcPts.push(midStartLeg);

  var arcPtsB = drawArc(centerPoint, -30, +30, google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint));
  // add the start and end lines
  // arcPtsB.push(centerPoint);
  arcPtsB.push(google.maps.geometry.spherical.computeOffset(centerPoint, google.maps.geometry.spherical.computeDistanceBetween(centerPoint, startPoint), -30));

  var piePoly = new google.maps.Polygon({
    paths: [arcPts],
    strokeColor: "#00FF00",
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map
  });
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, 'load', initialize);
// 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 infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function createMarker(latlng, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    draggable: true,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  bounds.extend(latlng);
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'dragend', function(evt) {
    infowindow.setContent(this.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
  })
}

function drawArc(center, initialBearing, finalBearing, radius) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 

  var points = 32;

  // 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;
}

function drawCircle(point, radius) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var EarthRadiusMeters = 6378137.0; // meters
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

  // find the raidus in lat/lon 
  var rlat = (radius / EarthRadiusMeters) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);


  var extp = new Array();
  for (var i = 0; i < points + 1; i++) // one extra here makes sure we connect the 
  {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    bounds.extend(extp[extp.length - 1]);
  }
  // alert(extp.length);
  return extp;
}

var map = null;
var bounds = null;

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

如何在googlemap中绘制2个同心圆弧

1 个答案: