Изменение размера значка маркера в Картах Google

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

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

код:

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

Ответы

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

До версии 3.10 API JavaScript Карт Google сложные значки определялись как объекты MarkerImage. Литерал объекта Icon был добавлен в 3.10 и заменяет MarkerImage начиная с версии 3.11. Литералы объекта Icon поддерживают те же параметры, что и 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
 });

Ответ 4

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

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

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

Ответ 5

Удалите оригинал и якорь будет более обычной картиной

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

Ответ 6

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

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