用不调整大小的谷歌地图 api3 画一个圆圈答案

【问题标题】：Draw a circle with google maps api3 that doesn't resize用不调整大小的谷歌地图 api3 画一个圆圈
【发布时间】：2011-05-30 20:00:45
【问题描述】：

使用 google maps api2 我正在使用此代码绘制一个圆圈：

var markerPoint = currentMarker.getPoint();

var polyPoints = Array();

var mapNormalProj = G_NORMAL_MAP.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = mapNormalProj.fromLatLngToPixel(markerPoint, mapZoom);

var polySmallRadius = 20;

var polyNumSides = 20;
var polySideLength = 18;

for (var a = 0; a<(polyNumSides+1); a++) {
 var aRad = polySideLength*a*(Math.PI/180);
 var polyRadius = polySmallRadius; 
 var pixelX = clickedPixel.x + 5 + polyRadius * Math.cos(aRad);
 var pixelY = clickedPixel.y - 10 + polyRadius * Math.sin(aRad);
 var polyPixel = new GPoint(pixelX,pixelY);
 var polyPoint = mapNormalProj.fromPixelToLatLng(polyPixel,mapZoom);
 polyPoints.push(polyPoint);
}
// Using GPolygon(points,  strokeColor?,  strokeWeight?,  strokeOpacity?,  fillColor?,  fillOpacity?)
highlightCircle = new GPolygon(polyPoints,"#000000",2,0.0,"#FF0000",.5);
map.addOverlay(highlightCircle);

我已设法将此代码转换为 api3：

var markerPoint = currentMarker.getPosition();

var polyPoints = Array();


var mapNormalProj = map.getProjection();
var mapZoom = map.getZoom();
var clickedPixel = mapNormalProj.fromLatLngToPoint(markerPoint);

var polyRadius = 20;

var polyNumSides = 20;
var polySideLength = 18;

for (var a = 0; a<(polyNumSides+1); a++) {
 var aRad = polySideLength*a*(Math.PI/180);
 var pixelX = clickedPixel.x + 5 + (polyRadius * Math.cos(aRad));
 var pixelY = clickedPixel.y - 10 + (polyRadius * Math.sin(aRad));
 var polyPixel = new google.maps.Point(pixelX,pixelY);
 var polyPoint = mapNormalProj.fromPointToLatLng(polyPixel);
 polyPoints.push(polyPoint);
}

highlightCircle = new google.maps.Polygon({
 paths: polyPoints,
 strokeColor: "#FF0000",
 strokeOpacity: 0.8,
 strokeWeight: 2,
 fillColor: "#FF0000",
 fillOpacity: 0.35
});

highlightCircle.setMap(map);

如果您更仔细地查看 api3 示例，mapZoom 变量不会在任何地方使用。

在 api2 中，代码会在我的标记周围生成一个小圆圈 - 半径约为 35 像素。当我放大地图时，半径保持在 35px（因为考虑了缩放）。

另一方面，使用 api3，我有一个巨大的圆圈 - 超过 200 像素宽，当我放大时，圆圈变得越来越大。

它的行为方式与 api3 中可用的圆形对象相同。

我想要的只是标记周围的一个小圆圈，直径不是 100 公里，但标记周围只有几个像素（这个圆圈就像 html 中的悬停元素）。

有什么想法可以实现吗？

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

使用自定义标记而不是圆圈可能会更好。请参阅此处文档中的“矢量图标”：https://developers.google.com/maps/documentation/javascript/overlays#Icons

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-25.363882, 131.044922),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 10
    },
    draggable: true,
    map: map
});

【讨论】：

【解决方案2】：

您正在根据点平面进行计算，无论您处于何种缩放级别，该平面都保持不变。您的意思可能是使用像素进行计算。

您正在寻找的方法是here。 fromLatLngToContainerPixel 和 fromContainerPixelToLatLng 或 fromLatLngToDivPixel 和 fromDivPixelToLatLng。

这意味着您可能应该将该代码包装到 OverlayView 中并在您的 map 上调用 getProjection() 以获取投影，然后使用其中一组方法进行计算。

【讨论】：