Vị trí hình ảnh đánh dấu bản đồ Google

Question

Làm cách nào chúng tôi có thể định vị hình ảnh sprite làm điểm đánh dấu bản đồ của Google. Ví dụ: Trong css, chúng tôi định vị hình ảnh như

background: url('../images/bodycss/pointer.png') 28px -32px; 

Bây giờ tôi có thể bao gồm mã trên vào hàm google api-v3 dưới đây?

function setMarkers(map, markers) { 

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png"); 

    for (var i = 0; i < markers.length; i++) { 
     var sites = markers[i]; 
     var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
     var marker = new google.maps.Marker({ 
      position: siteLatLng, 
      map: map, 
      title: sites[0], 
      zIndex: sites[3], 
      html: sites[4], 
      icon: google_image 
     }); 

     google.maps.event.addListener(marker, "mouseover", function() { 
      infowindow.setContent(this.html); 
      infowindow.open(map, this); 
     }); 
    } 
} 

Answer 1

Để tạo MarkerImage từ hình ảnh sprite, bạn cần chỉ định nguồn gốc và kích thước của phần hình ảnh bạn muốn sử dụng để tạo biểu tượng.

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34)); 

Bạn có thể có một cái nhìn tại Blog post này mô tả nó cũng

Cập nhật - Xem này Fiddle- làm việc DEMO

Tôi đã sử dụng image- này http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 và điều chỉnh kích thước và điểm giá trị cho biểu tượng.

Answer 2

Bạn có thể sử dụng anchor tài sản của một MarkerImage đó, như tài liệu here ghi đè vị trí mặc định:

Vị trí mà tại đó để neo một hình ảnh trong correspondance đến vị trí của điểm đánh dấu trên bản đồ. Theo mặc định, neo nằm dọc theo điểm giữa của phần dưới cùng của hình ảnh.

p.s. MarkerImage không được dùng nữa và bạn nên cân nhắc sử dụng icon.

Answer 3

Trước khi lớp MarkerImage trở nên bị phản đối (có nghĩa là nó vẫn còn được hỗ trợ, nhưng nên được thay thế) có lợi cho đối tượng Biểu tượng, bạn có thể đã viết một cái gì đó như thế này cho một hình ảnh đơn giản:

var qthIconHouse20 = new google.maps.MarkerImage('grafx/house_icon_20.png', 
            new google.maps.Size(20, 20), 
            new google.maps.Point(0, 0), 
            new google.maps.Point(10, 10)); 

Bây giờ, sử dụng các đối tượng Icon, bạn sẽ viết này:

var qthIconHouse20 = { 
    url:  'grafx/house_icon_20.png', 
    size:  new google.maps.Size(20, 20), 
    origin:  new google.maps.Point(0, 0), 
    anchor:  new google.maps.Point(10, 10), 
    scaledSize: new google.maps.Size(20, 20) 
}; 

Lưu ý các tham số scaledSize thêm: cho hình ảnh đơn giản, đây là kích cỡ của ảnh gốc - mà trong trường hợp đặc biệt này cũng giống như các thông số kích thước.

Đối với sprites, nơi bạn có một vài hình ảnh chứa trong một tập tin hình ảnh duy nhất, bạn có thể sử dụng một cái gì đó như thế này:

var qthIconBlueSpot16 = { 
    url:  'grafx/qth_icon_spots_16.png', 
    size:  new google.maps.Size(16, 16), 
    origin:  new google.maps.Point(0, 32), 
    anchor:  new google.maps.Point(8, 8), 
    scaledSize: new google.maps.Size(16, 48) 
}; 

Lưu ý rằng, trong ví dụ này, nguồn gốc đã được quy định như (0, 32) trong một sprite chứa nhiều hình ảnh 16 * 16 pixel: vì vậy ở đây, chúng tôi đang chọn hình ảnh thứ ba trong sprite. Trong phần đó của hình ảnh, chúng tôi đặt neo thành (8, 8) - tức là ở giữa phần được chọn của hình ảnh sẽ được hiển thị. Cuối cùng, scaledSize ở đây đề cập đến kích thước của ảnh toàn cảnh toàn bộ.