Смещение маркера в Google Map API v3

Question

Я создал простую карту с пользовательскими маркерами PNG. Можно ли сместить прикрепленное изображение PNG? Похоже, что в документации Google Map API v3 нет упоминания о смещении.

Answer 1

Начиная с версии 3.10 класс MarkerImage устарел, вместо него следует использовать анонимный объект Icon.Начиная с документации

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

Например:

var marker = new google.maps.Marker({
  map:map,
  position: map.getCenter(),
  icon: {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  }
});

пример скрипта

фрагмент кода "

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: "http://i.stack.imgur.com/PYAIJ.png",
      size: new google.maps.Size(36, 36),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(18, 18),
      scaledSize: new google.maps.Size(25, 25)
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Answer 2

Опция anchor в классе MarkerImage позволяет сместить изображение маркера от средней центральной позиции на его широте / ширине:

'anchor"переопределяет положение точки привязки с его по умолчанию нижней средней позиции

1009 *

Answer 3

Для v3, вот как я это сделал:

var image = new google.maps.MarkerImage("images/car1.png",
    new google.maps.Size(60, 60),
    new google.maps.Point(0,0),
    new google.maps.Point(30, 30)
);

//ADD MARKER AT EACH POINT
var marker = new google.maps.Marker();
marker.setPosition(new_point);
marker.setIcon(image);
marker.setZIndex(0);
marker.setMap(map);

Answer 4

Я искал только эту опцию и нашел образец здесь:
http://econym.org.uk/gmap/custom.htm

Настройка iconAnchor (на самом деле для данных маркера) работает для меня.

   var Icon = new GIcon();
      Icon.image = "mymarker.png";
      Icon.iconSize = new GSize(20, 34);
      Icon.shadow = "myshadow.png";
      Icon.shadowSize = new GSize(36, 34);
      Icon.iconAnchor = new GPoint(5, 34);
      Icon.infoWindowAnchor = new GPoint(5, 2);
      Icon.transparent = "mytran.png";