Thay đổi kích thước điểm đánh dấu tùy thuộc vào thu phóng Google maps v3

Question

Tôi có bản đồ Google chạy trên API v3, tôi đã thêm một số dấu tùy chỉnh, có thể làm cho chúng có quy mô tùy thuộc vào mức thu phóng của bản đồ không? Tôi đã thử tìm kiếm tham chiếu nhưng dường như không thể tìm thấy bất kỳ phương pháp nào để thay đổi kích thước MarkerImage.

Có lẽ tôi phải xóa đánh dấu mọi thứ mà bản đồ thay đổi thu phóng và tạo điểm đánh dấu mới ở kích thước khác nhau?

Answer 1

Thật không may, bạn sẽ phải setIcon mỗi lần. Tuy nhiên, bạn có thể xác định trước chúng, và sau đó chỉ áp dụng chúng cho điểm đánh dấu.

zoomIcons = [null, icon1, icon2]; // No such thing as zoom level 0. A global variable or define within object. 
marker.setIcon(zoomIcons[map.getZoom()]); 

Answer 2

Mã này sẽ thay đổi kích thước mỗi khi bản đồ được phóng to để luôn luôn bao phủ cùng một khu vực địa lý.

//create a marker image with the path to your graphic and the size of your graphic 
var markerImage = new google.maps.MarkerImage(
    'myIcon.png', 
    new google.maps.Size(8,8), //size 
    null, //origin 
    null, //anchor 
    new google.maps.Size(8,8) //scale 
); 

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(38, -98), 
    map: map, 
    icon: markerImage //set the markers icon to the MarkerImage 
}); 

//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area 
google.maps.event.addListener(map, 'zoom_changed', function() { 

    var pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0 
    var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels 

    var zoom = map.getZoom(); 
    var relativePixelSize = Math.round(pixelSizeAtZoom0*Math.pow(2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size. Base of exponent is 2 because relative size should double every time you zoom in 

    if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon 
     relativePixelSize = maxPixelSize; 

    //change the size of the icon 
    marker.setIcon(
     new google.maps.MarkerImage(
      marker.getIcon().url, //marker's same icon graphic 
      null,//size 
      null,//origin 
      null, //anchor 
      new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale 
     ) 
    );   
});