Google Map API v3上的标记偏移

Question

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

Answer 1

在MarkerImage类锚选项，可以抵消上标记的纬度/经度中部中心位置的标记图像：

“锚”覆盖 锚点的位置从其默认底部 中间位置

Answer 2

我一直在寻找的只是此选项，并在这里找到一个样本：
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 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

随着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

代码段”

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>