Question

嘿伙计们，使用谷歌地图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中，代码在我的标记周围生成一个小圆圈 - 大约35px半径。当我放大地图时，半径保持在35px。（因为考虑了缩放）

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

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

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

任何想法如何实现？

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

Answer 2

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

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

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

用谷歌地图api3绘制一个不调整大小的圆圈

2 个答案: