标记偏移在Google Map API v3上

Question

我创建了一个带有自定义PNG标记的简单地图.是否可以抵消附加的PNG图像？Google Map API v3文档中似乎没有提及"偏移量".

Answer 1

MarkerImage类的锚选项允许从标记的lat/lng上的中间中心位置偏移标记图像:

'anchor'会从其默认的底部中间位置覆盖锚点的位置

Answer 2

从v3.10开始,MarkerImage该类已被弃用,Icon应该使用匿名对象.从文档中

在Google Maps JavaScript API版本3.10之前,复杂图标被定义为MarkerImage对象.Icon对象文字已在3.10版本中添加,并从3.11版本开始替换MarkerImage.

例如:

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>