Điểm đánh dấu tắt trên Google Map API v3

Question

Tôi đã tạo một bản đồ đơn giản với các điểm đánh dấu PNG tùy chỉnh. Có thể bù đắp hình ảnh PNG đính kèm không? Dường như không có bất kỳ đề cập nào về 'bù đắp' trong tài liệu Google Map API v3.

Answer 1

Các neo tùy chọn trên lớp MarkerImage cho phép bù đắp các ảnh đánh dấu từ vị trí trung tâm giữa trên của marker lat/lng:

'neo' ghi đè vị trí của các điểm neo từ mặc định của nó đáy vị trí trung

Answer 2

tôi đang tìm kiếm chỉ tùy chọn này và tìm thấy một mẫu ở đây:
http://econym.org.uk/gmap/custom.htm

Biểu tượng cài đặtAnchor (trên dữ liệu điểm đánh dấu thực sự) đã hoạt động đối với tôi.

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

Đối với v3, đây là cách tôi thực hiện nó:

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

Tính đến v3.10, lớp MarkerImage đã bị phản đối, các Icon đối tượng ẩn danh nên được sử dụng để thay thế. Từ the documentation

Cho đến phiên bản 3.10 của API JavaScript của Google Maps, biểu tượng phức tạp được định nghĩa là đối tượng MarkerImage. Biểu tượng đối tượng được thêm vào phiên bản 3.10 và thay thế MarkerImage từ phiên bản 3.11 trở đi.

Ví dụ:

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

đoạn mã"

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>