Ответ 1
Параметр привязки класса MarkerImage позволяет смещать изображение маркера со средней центральной позиции маркера lat/lng:
'anchor' переопределяет положение опорная точка от дна по умолчанию средняя позиция
Я создал простую карту с пользовательскими маркерами PNG. Можно ли компенсировать прикрепленное изображение PNG? В документации Google Map API v3 не упоминается "смещение".
Параметр привязки класса MarkerImage позволяет смещать изображение маркера со средней центральной позиции маркера lat/lng:
'anchor' переопределяет положение опорная точка от дна по умолчанию средняя позиция
Начиная с версии 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>
Я искал именно этот вариант и нашел образец здесь:
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";
Для 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);