Google đánh dấu tùy chỉnh bản đồ Độ phân giải võng mạc

Question

Tôi đang phát triển một ứng dụng iPhone trong html5 và tạo bản dựng bằng Phonegap. Trong ứng dụng có một bản đồ Google với các đánh dấu tùy chỉnh, cách các biểu tượng đánh dấu được tạo ra như sau:

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30)); 
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30)); 

var marker = new google.maps.Marker({ 
       map: map, 
       position: latlng, 
       index: markers.length, 
       icon: image,      
       shadow: shadow, 
       animation: google.maps.Animation.DROP, 
       html: htmlContent             
      }); 

Kích thước thực tế của của biểu tượng có kích thước gấp đôi so với các kích thước được xác định trong các mã. Điều này được thực hiện để đảm bảo các biểu tượng được hiển thị ở độ phân giải cao trên màn hình Retina. Mã ở trên hoạt động tốt cho đến hôm nay, nhưng những gì xảy ra bây giờ là như sau.

Khi biểu tượng thả xuống, sử dụng google.maps.Animation.DROP, biểu tượng được hiển thị ở độ phân giải cao trên đường xuống, nhưng khi biểu tượng "hạ cánh" trên bản đồ, biểu tượng sẽ chuyển sang độ phân giải thấp phiên bản độ phân giải.

Có ai từng trải nghiệm giống nhau không?

Cảm ơn bạn ...

CẬP NHẬT Tìm thấy ra rằng nếu tôi chỉ định phiên bản bản đồ của Google như:

http://maps.googleapis.com/maps/api/js?v=3.0 

Vì vậy, tôi đoán đó là một lỗi trong bản đồ API mới nhất Goolge.

Answer 1

Tôi cũng đã tìm thấy vấn đề này. Lỗi này dường như mới nhất (v3.7) của API của họ, vì vậy nếu bạn chỉ định v3.6 thông qua tham số URL thì v = 3.6 nó sẽ hoạt động tốt.

Cập nhật: Trong phiên bản 3.8+ (tôi nghĩ) bạn có thể sử dụng tối ưu hóa: false để buộc hình ảnh võng mạc, nếu bạn đang sử dụng hình ảnh đó. Điều này là bởi vì tối ưu hóa: đúng mất tất cả các sprites của bạn và dệt chúng lại với nhau thành một sprite master. Điều này có nghĩa là bạn chỉ nên làm điều này nếu bạn có rất ít điểm đánh dấu. Ngoài ra, không hoạt động tốt với Clusterer.

Giá trị mặc định hiện được tối ưu hóa: true, sẽ xác định trước tiên nếu thiết bị thậm chí có thể xử lý hiển thị nhiều biểu tượng có độ phân giải cao trước khi tạo sprite chính ở độ phân giải cao hơn. Ví dụ: tải bản đồ có nhiều điểm đánh dấu trên võng mạc Macbook Pro và chúng sẽ xuất hiện độ phân giải cao nhưng hãy thử iPhone 4 và nó sẽ không xuất hiện. Nếu bạn buộc iPhone 4 sử dụng tối ưu: sai, và có rất nhiều dấu, nó có thể nói lắp rất nhiều. Bạn không chắc chắn về 4S nhưng tôi giả sử nó có thể sẽ sử dụng phiên bản res cao hơn vì nó có khả năng xử lý tốt hơn rất nhiều.

Answer 2

Nếu bạn gặp phải bất kỳ chuyển đổi biểu tượng nào ở độ phân giải thấp hơn, đó là vì bản đồ api sử dụng canvas để hiển thị biểu tượng (nhóm chúng và không biết?) Để có trải nghiệm người dùng nhanh hơn. Vì vậy, nó không phải là về mặt kỹ thuật là một lỗi, nhưng nó gây ra lỗi những điều xảy ra trong các trình duyệt nhất định (như ví dụ cũ)

Nhưng có một thiết lập mà bạn có thể sử dụng để tắt trong MarkerOptions sử dụng optimized: false

var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      icon: image,      
      shadow: shadow, 
      optimized: false            
     }); 

Answer 3

Tôi đã tìm thấy giải pháp của mình cho điều này bằng cách sử dụng scaledSize thay vì size để xác định chiều rộng và chiều cao của hình ảnh.

Answer 4

Scaled sở hữu Kích thước là điều đúng để sử dụng như tham chiếu bởi Google tại đây: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

Answer 5

Đơn giản chỉ cần sử dụng một đối tượng với url, size, và scaledSize thuộc tính:

var icon = { 
    url: 'path/img/marker@2x.png', 
    size: new google.maps.Size(30, 40), 
    scaledSize: new google.maps.Size(30, 40) 
}; 

đâu path/img/marker@2x.png là một 60px x 80px PNG.