javascript - 在谷歌地图中绘制带有虚线边框的圆圈，并应填充颜色

Question

我正在尝试在谷歌地图中画一个带有虚线边框的圆圈。

我有一个画圆的函数，它返回我的经纬度集我使用谷歌地图多边形 API 来绘制圆形，但边界是一条联合线，而不是虚线。

有什么想法吗？
我发布我的代码以供引用:

function drawCircle(point, radius, dir) {
    var d2r = Math.PI / 180;   // degrees to radians
    var r2d = 180 / Math.PI;   // radians to degrees
    var earthsradius = 3963; // 3963 is the radius of the earth in miles

    var points = 32;

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

    var extp = new Array();
    if (dir === 1) {
        var start = 0;
        var end = points + 1; // one extra here makes sure we connect the path
    } else {
        var start = points + 1;
        var end = 0;
    }
    for (var i = start; (dir === 1 ? i < end : i > end); i = i + dir)
    {
        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));
    }
    return extp;
}

var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
};

var circle = new google.maps.Polygon({
                                          path: drawCircle(new google.maps.LatLng
                                                           (center.latitude,
                                                            center.longitude),
                                                           radius/1609.344, 1),
                                          strokeOpacity: 0.5,
                                          icons: [{
                                                  icon: lineSymbol,
                                                  offset: '0',
                                                  repeat: '20px'
                                              }],
                                          strokeWeight: 2,
                                          strokeColor: '#ffcb00',
                                          fillColor: '#ffcb00',
                                          fillOpacity: 0.1
                                      });

return circle ;

Answer 1

示例实现:

function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var radius = 500000;

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });

  var lineSymbol = {
    path: 'M 0,-1 0,1',
    strokeOpacity: 1,
    scale: 4
  };

  var circlePoly = new google.maps.Polyline({
    path: drawCircle(myLatLng,
      radius / 1609.344, 1),
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px'
    }],
    strokeWeight: 2,
    strokeColor: 'red',
    fillColor: '#ffcb00',
    fillOpacity: 0.1,
    map: map
  });

  var circle = new google.maps.Circle({
    strokeWeight: 0,
    fillColor: 'yellow',
    fillOpacity: .5,
    map: map,
    center: myLatLng,
    radius: radius
  });
}

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians
  var r2d = 180 / Math.PI; // radians to degrees
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

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

  var extp = new Array();
  if (dir === 1) {
    var start = 0;
    var end = points + 1; // one extra here makes sure we connect the path
  } else {
    var start = points + 1;
    var end = 0;
  }
  for (var i = start;
    (dir === 1 ? i < end : i > end); i = i + dir) {
    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));
  }
  return extp;
}


initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

同样的想法，使用 SymbolPath 作为虚线边框(“点”会更合适)，我发现渲染效果更好......

function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var radius = 500000;

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 2
  };

  var circlePoly = new google.maps.Polyline({
    path: drawCircle(myLatLng,
      radius / 1609.344, 1),
    strokeOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
    strokeWeight: 2,
    strokeColor: 'red',
    fillColor: '#ffcb00',
    fillOpacity: 0.1,
    map: map
  });

  var circle = new google.maps.Circle({
    strokeWeight: 0,
    fillColor: 'yellow',
    fillOpacity: .5,
    map: map,
    center: myLatLng,
    radius: radius
  });
}

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians
  var r2d = 180 / Math.PI; // radians to degrees
  var earthsradius = 3963; // 3963 is the radius of the earth in miles

  var points = 32;

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

  var extp = new Array();
  if (dir === 1) {
    var start = 0;
    var end = points + 1; // one extra here makes sure we connect the path
  } else {
    var start = points + 1;
    var end = 0;
  }
  for (var i = start;
    (dir === 1 ? i < end : i > end); i = i + dir) {
    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));
  }
  return extp;
}


initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>