Изменение размера маркера в Google maps V3

Я использую это объяснение о том, как окрасить маркер карты Google, установив значок с помощью MarkerImage, и окраска работает хорошо. Но я не могу заставить параметр scaledSize изменять размер маркера.

    var pinColor = 'FFFF00';
    var pinIcon = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34),
        new google.maps.Size(2, 4));
    marker.setIcon(pinIcon);

Какое правильное использование аргумента scaledSize для изменения размера маркера? Например, как я могу удвоить размер маркера?

Ответы

Ответ 1

Этот ответ излагает полезный ответ Джона Блэка, поэтому я повторю часть своего ответа в своем ответе.

Самый простой способ изменить размер маркера, похоже, оставляет аргумент 2, 3 и 4 нулем и масштабирует размер в аргументе 5.

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00",
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);

Как вариант, этот ответ по аналогичному вопросу утверждает, что определение размера маркера во втором аргументе лучше, чем масштабирование в 5-м аргументе. Я не знаю, верно ли это.

Оставшиеся аргументы 2-4 null отлично подходят для изображения по умолчанию google, но вы должны явно установить якорь для изображения теней по умолчанию google, или оно будет выглядеть так:

what happens when you leave anchor null on an enlarged shadow

Нижний центр пин-изображения оказывается совмещенным с кончиком штифта, когда вы просматриваете графику на карте. Это важно, поскольку свойство позиции маркера (маркер LatLng позиция на карте) будет автоматически совмещаться с визуальным концом булавки, когда вы оставляете якорь (4-й аргумент) null. Другими словами, оставляя якорный нуль, он обеспечивает точки наконечника, где он должен указывать.

Однако кончик тени не расположен в центре снизу. Таким образом, вам нужно явно задать 4-й аргумент, чтобы компенсировать наконечник тени, чтобы наконечник тени был помещен в контакт с кончиком пин-изображения.

Экспериментируя, я обнаружил, что кончик тени должен быть установлен следующим образом: x составляет 1/3 от размера, а y - 100% от размера.

var pinShadow = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    null,
    null,
    /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */
    new google.maps.Point(40, 110), 
    new google.maps.Size(120, 110));

чтобы дать следующее:

offset the enlarged shadow anchor explicitly

Ответ 2

Аргументы размера находятся в пикселях. Итак, чтобы удвоить размер маркера вашего примера, пятым аргументом конструктора MarkerImage будет:

new google.maps.Size(42,68)

Я считаю, что проще всего использовать API-интерфейс карты для других аргументов, если мне не требуется что-то другое, кроме нижней/центральной части изображения, в качестве якоря. В вашем случае вы можете сделать:

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);