如何對齊谷歌地圖上的標記圖標

Question

在谷歌地圖中，​​標記圖像的中心底部通常是其必須標記點的緯度。

想象我的標記圖標是一個圓，我想它的中心是在給定的點的緯度和經度...

代碼：

var image_hotspot = 'img/icons/bank_euro.png'; 
var marker = new google.maps.Marker({ 
     map: map, 
     position: placeLoc, 
     icon: image_hotspot 
    }); 

Answer 1

你什麼需要的是創建一個對象MarkerImage，例如：

var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png', 
       new google.maps.Size(30, 30), 
       new google.maps.Point(0, 0), 
       new google.maps.Point(15, 15)); 

其中第一個參數是一個圖像的URL，第二是圖像大小，第三是或igin點的圖像，第四個是標記應指向的圖像上的位置。 如果您的標記是一個圓圈，則將第四個參數設置爲圖像的中心。 並創建標記傳遞markerImage到icon屬性：

var marker = new google.maps.Marker({ 
    map: map, 
    position: placeLoc, 
    icon: markerImage 
}); 

Answer 2

從文檔：

轉換MarkerImage物件到類型圖標

var image = new google.maps.MarkerImage(
    place.icon, 
    new google.maps.Size(71, 71), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(17, 34), 
    new google.maps.Size(25, 25)); 

成爲

var image = { 
    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) 
}; 

https://developers.google.com/maps/documentation/javascript/markers

Answer 3

與谷歌地圖的V3，你可以/應該使用：

new maps.Marker({ 
      ... 
      icon: { 
       url: '.../myimage.png', 
       scaledSize: new maps.Size(60, 30), 
       anchor: new maps.Point(30, 30), 
      }, 
     }); 

https://developers.google.com/maps/documentation/javascript/reference#Icon