it-roy-ru.com

Изменить размер значка маркера Google Maps

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

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

Код:

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

Если исходный размер составляет 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
});
252
Catherine Nyo

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

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

До версии 3.10 API Google Maps JavaScript, сложные значки были определены как объекты 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
 });
13
Jono

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

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

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

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

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

1
bearacuda13

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

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

0
jumper