Маркер отключен в API карт Google v3

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

Ответы

Ответ 1

Параметр привязки класса MarkerImage позволяет смещать изображение маркера со средней центральной позиции маркера lat/lng:

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

Ответ 2

Начиная с версии 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>

Ответ 3

Я искал именно этот вариант и нашел образец здесь:
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";

Ответ 4

Для 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);