Question

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

Answer 1

MarkerImage类上的锚选项可让标记图像从标记的lat / lng上的中间位置偏移：

'anchor'会覆盖该位置锚点从默认底部开始中间位置

Answer 2

从v3.10开始，不推荐使用MarkerImage类，而应使用Icon匿名对象。来自the documentation

在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)
  }
});

example fiddle

代码段＆＃34;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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";

Answer 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);

标记偏移在Google Map API v3上

4 个答案: