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

Question

Я использую это объяснение того, как раскрасить маркер карты 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 для изменения размера маркера?Например, как я могу удвоить размер маркера?

Answer 1

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

Кажется, что самый простой способ изменить размер маркера - это оставить аргумент 2, 3 и 4 null и масштабирование размера в аргументе 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 Pin, но вы должны явно установить привязку для стандартного теневого изображения Google, иначе оно будет выглядетькак это:

Когда вы просматриваете графику на карте, нижний центр изображения булавки оказывается совмещенным с кончиком булавки.Это важно, потому что свойство позиции маркера (позиция маркера 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)); 

, чтобы дать это:

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