Изменить размер изображения значка маркера Google Maps


148

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

Я хочу изменить размер от стандартного до меньшего. Как лучше всего это сделать?

Код:

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

Ответы:


330

Если исходный размер 100 x 100 и вы хотите масштабировать его до 50 x 50, используйте scaledSize вместо Size.

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

Вот как это сделать в API v3.
Dean_Wilson

scaledSizeвместо scale= любовь
Сделано в Луне

Обязательно покрутите точки привязки, чтобы правильно совместить значок с местом.
bluedot

65

Как упоминалось в комментариях, это обновленное решение в пользу объекта 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
 });

12
MarkerImage устарел: используйте вместо этого объект значка!
Берто 01

8
Это не изменяет размер изображения, а обрезает его?
Луис А. Флорит

Использование icon objectи scaledSize: new google.maps.Size(h, w)собственность на этом объекте
Сверрир Зигмундарсон

2
@SverrirSigmundarson, это new google.maps.Size(w, h)НЕ ДОЛЖНО быть h, w
Рави Рам

@RaviRam Действительно, вы правы , спасибо за это исправление.
Сверрир Зигмундарсон 01

14

MarkerImage устарел для Icon

До версии 3.10 API JavaScript Карт Google сложные значки определялись как объекты MarkerImage. Литерал объекта Icon был добавлен в 3.10 и заменяет MarkerImage начиная с версии 3.11. Литералы объекта значка поддерживают те же параметры, что и MarkerImage, что позволяет легко преобразовать MarkerImage в значок, удалив конструктор, заключив предыдущие параметры в {} и добавив имена каждого параметра.

Код Филиппа теперь будет:

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

3
Я думаю, это не изменяет размер изображения, а обрезает его.
Луис А. Флорит

9
Вы scaledSizeскорее хотите , чем size.
bbodenmiller

Да, согласен с @bbodenmiller, возможно, вы ищете scaledSize. Для своего проекта я использую scaledSize, и это мне подходит. var icon = {url: imageName, scaledSize: new google.maps.Size (8, 12)};
user908645

8

Удалите начало координат и привязка будет более обычной картинкой

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

Это сработало для меня! Если бы я попытался установить параметр scaledImage внутри кода маркера, это не сработало бы.
Dumber_Texan2

1

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

Изображение 500x500 будет больше на карте, чем изображение 50x50.

Никакого программирования не требуется.


1

Так что у меня была такая же проблема, но немного другая. У меня уже был значок в виде объекта, как предлагает Филиппе Буассонно , но я использовал изображение SVG.

Для меня это решило следующее:
переключиться с SVG-изображения на PNG и последовать примеру Кэтрин Нио о том, что изображение в два раза больше того, что вы будете использовать.


0

Если вы используете vue2-google-maps, как я, код для установки размера выглядит следующим образом:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.