在谷歌地图 api v3 中绘制（倒置）几何圆答案

【问题标题】：Draw (inverted) geometric circle in google maps api v3在谷歌地图 api v3 中绘制（倒置）几何圆
【发布时间】：2013-08-16 15:00:28
【问题描述】：

我正在寻找一种在 google maps api v3 中绘制倒置几何（非地理）圆的方法。

本质上，目标是使地图变暗，除了地图对象周围 - 作为使地图对象突出的一种方式。为此，我采用了倒置叠加，并有一种方法可以在我的“阴影叠加”中创建圆形“洞”。

但是，我用来获取 lat/lng 坐标以生成此圆的方法已调整为墨卡托投影，并且大小或形状不一致，因为它与赤道的位置有关。该方法需要创建一个圆（不使用谷歌的圆对象 - 或使用它来提取它的路径），该圆将根据不采用墨卡托投影的半径场从中心计算纬度/经度点考虑到 - 这样它就会在地图上的任何位置显示一个完美的圆圈。

这应该不难，但我正在努力将此函数转换为不将墨卡托投影应用于结果：

function getCircleCoords(point, radius) {
  var d2r = Math.PI / 180;   // degrees to radians
  var points = 90;
  var circleLatLngs = new Array();
  var circleLat = radius * 0.621371192 * 0.014483;
  var circleLng = circleLat / Math.cos( point.lat() * d2r);
  for (var i = 0; i < points+1; i++) { 
    var theta = Math.PI * (i / (points / 2)); 
    var vertexLat =  point.lat() + (circleLat * Math.sin(theta)); 
    var vertexLng =  point.lng() + (circleLng * Math.cos(theta));

    var vertexLat =  point.lat() + (circleLat * (theta)); 
    var vertexLng =  point.lng() + (circleLng * (theta));

    var vertextLatLng = new google.maps.LatLng(vertexLat, vertexLng);
    circleLatLngs.push( vertextLatLng );
  }
  return circleLatLngs;
}

这将被称为：

feature = new google.maps.Polygon({
    paths: [[my_shadow_layer_path],[getCircleCoords(latLng_, 800)] ],
    fillColor: '#ff0000',
    fillOpacity: 0.5,
    map: map_
  });
}

想法？

【问题讨论】：

标签： google-maps-api-3 latitude-longitude geometry

【解决方案1】：

要使用多边形，您需要以像素（世界）坐标计算圆坐标，使用fromPointToLatLng 将它们转换为地理坐标，以获得圆的适当坐标。或者使用正确大小的叠加层并自己处理缩放更改。

【讨论】：

你知道如何以像素格式计算圆坐标吗？
这只是一个normal circle。
我不能使用普通圆，因为我需要将圆的路径添加到 Polygon，以便可以反转其中的圆。
您需要计算像素坐标中的“法线圆”。将它们转换为 lat/lng 坐标，然后将它们添加到多边形。当缩放级别改变时重新计算。
我不知道如何在像素坐标中创建一个“法线圆”。你有这方面的例子吗？

【解决方案2】：

你可以试试这个库https://github.com/raihan2006i/google-map-inverted-circle。它适用于谷歌地图 V3。请参阅下面的示例代码块

var iCircle;
var map;
function initialize() {
    var mapDiv = document.getElementById('gMap');
    map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    iCircle = new InvertedCircle({
        center: map.getCenter(),
        map: map,
        radius: 5000, // 5 km
        editable: true,
        stroke_weight: 5,
        fill_opacity: 0.5,
        fill_color: "#ff0000"
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

【讨论】：