Нарисуйте круг с 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)

Есть идеи, как этого добиться?

Answer 1

Возможно, вам повезет больше, если использовать нестандартный маркер, а не круг.См. «Векторный Icon» в документации здесь: 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, плоскость которой остается неизменной независимо от того, на каком уровне масштабирования вы находитесь.Вы, вероятно, хотите выполнить вычисления с использованием пикселей.

Методы, которые вы ищете, это здесь .fromLatLngToContainerPixel и fromContainerPixelToLatLng или fromLatLngToDivPixel и fromDivPixelToLatLng.

Это означает, что вам, вероятно, следует свернуть этот код в OverlayView и вызвать getProjection() на вашем map, чтобы получить прогноз, а затемиспользуйте один из этих методов для расчета.