使用Google Maps API3绘制一个不会改变大小的圆形

Question

使用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像素的半径。当我放大地图时，半径保持在35像素（因为考虑到了缩放）。

然而，在api3中，我有一个巨大的圆圈 - 超过200像素宽，当我放大时，圆圈变得越来越大。

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

我想要的只是一个小圆圈，围绕着我的标记，不是100公里直径，而只是几个像素围绕着我的标记（这个圆圈就像html中的hover元素）。

有什么想法可以实现吗？

- Daniel Dimitrov

Answer 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
});

- michaelrp

Answer 2

您正在基于点平面进行计算，该平面无论缩放级别如何都保持不变。您可能想使用像素进行计算。

您要查找的方法在这里。 fromLatLngToContainerPixel 和 fromContainerPixelToLatLng 或者 fromLatLngToDivPixel 和 fromDivPixelToLatLng。

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

- myeeshen