Змініть розмір зображення піктограми маркера Google Maps

Коли я завантажую зображення у властивість значка маркера, воно відображається з його оригінальним розміром, який набагато більший, ніж повинен бути.

Я хочу змінити розмір до стандарту до меншого розміру. Який найкращий спосіб зробити це?

Код:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

Якщо вихідний розмір становить 100 х 100, і ви хочете його масштабувати до 50 х 50, використовуйте масштабований розмір замість Розмір.

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Як згадується в коментарях, це оновлене рішення на користь об’єкта Icon з документацією.

Використовуйте об’єкт Icon

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });

MarkerImage заборонено для Icon

До версії 3.10 JavaScript API Google Maps, складні значки визначалися як об’єкти MarkerImage. Літеральний об’єкт Icon був доданий у 3.10 і замінює MarkerImage від версії 3.11. Літеральні об’єкти значків підтримують ті самі параметри, що і MarkerImage, дозволяючи легко перетворити MarkerImage в Icon, видаливши конструктор, загорнувши попередні параметри в {} 'і додавши імена кожного параметра.

Зараз Код Філіппа буде:

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });

Видалити походження і якір будуть більш регулярною картиною

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });

Повному початківцю, як я, до теми, можливо, буде складніше реалізувати одну з цих відповідей, ніж, якщо у вас є контроль, змінити розмір зображення самостійно за допомогою онлайн-редактора або редактора фотографій, як Photoshop.

Зображення розміром 500x500 буде виглядати на карті більше, ніж зображення розміром 50x50.

Не потрібно програмування.

Тож у мене було саме це питання, але трохи інше. Я вже мав ікону в якості предмета, як Філіп Бойсон пропонує , але я використовував зображення SVG.

Що для мене це вирішило:
переключитися із зображення SVG на PNG і слідувати за Кетрін Нійо , щоб зображення було вдвічі більше, ніж ти будеш використовувати.

Якщо ви використовуєте vue2-google-maps, як я, код для встановлення розміру виглядає приблизно так:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>