đổi kích thước biểu tượng svg cho điểm đánh dấu bản đồ google

Question

Tôi đang gặp sự cố khi thay đổi kích thước biểu tượng trong bản đồ google. Tôi có một tập tin svg để làm cho nó đáp ứng.

đây là cách tôi gọi file svg

MyGreenSVG = { 
    url: 'greenFill.svg', 
    size: new google.maps.Size(20, 35) 
}; 

tài sản: kích thước không thay đổi kích thước của biểu tượng của tôi, nhưng chỉ cắt hình ảnh. cách duy nhất là thay đổi chiều rộng và chiều cao trong tệp svg của tôi và tạo 2 phiên bản của nó. vì vậy tôi mất lợi ích của việc sử dụng svg ...

đây là một bản xem trước của tập tin svg của tôi:

<svg version="1.1" 
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve"> 

Answer 1

có cùng một vấn đề, nó giải quyết bằng cách sử dụng quy mô:

MyGreenSVG = { 
    url: 'greenFill.svg', 
    scale: 0.5 
}; 

Phần kỳ lạ là tôi dành một giờ ngày hôm qua cố gắng để làm cho nó hoạt động và nó đã không, hôm nay tôi thay đổi số 0,3-0,2 và làm việc hoàn hảo. vì vậy hãy cẩn thận với bộ nhớ cache và nội dung.

Answer 2

Tôi cũng không thể thay đổi kích thước bằng cách sử dụng scale. Tôi đã tìm thấy rằng nếu tôi sử dụng một MarkerImage thì tôi có thể mở rộng quy mô svg và nó trông khá tốt, cách tốt hơn so với một png như xa như thế nào mịn nó được. Tôi không nghĩ đó là một 'biểu tượng' nữa nếu tôi đang sử dụng MarkerImage.

function initialize() { 
    var mapOptions = { 
    zoom: 4, 
    center: new google.maps.LatLng(-25.363882, 131.044922) 
    }; 

var map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: new google.maps.MarkerImage('icons/myIcon.svg', 
    null, null, null, new google.maps.Size(200,200)), 
    draggable: false, 
    map: map 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Tôi vẫn đang tìm giải pháp tốt hơn.

CẬP NHẬT (04/14/2015)

Tôi thấy điều này trên các tài liệu ở dưới cùng của complex icons và ngay trên liên kết đến symbols:

Chuyển đổi đối tượng MarkerImage gõ Biểu tượng

Cho đến phiên bản 3.10 của API JavaScript của Google Maps, các 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. Các đối tượng biểu tượng hỗ trợ các tham số giống như MarkerImage, cho phép bạn dễ dàng chuyển đổi MarkerImage thành Biểu tượng bằng cách loại bỏ hàm tạo, bao bọc các tham số trước đó trong {} và thêm tên của mỗi tham số. Ví dụ:

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)); 

trở thành

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) 
}; 

tôi đã chơi đùa với các size và scaledSize và có an example here. Có vẻ như tôi có thể nhận xét số size và scaledSize hoạt động tốt. Nếu số size nhỏ hơn scaledSize, đồ họa sẽ bị cắt.

Answer 3

Đây là một giải pháp đánh dấu mở rộng quy mô trên cơ sở zoom

var someMarker; 
    var title = "Some title"; 

    // A SVG flag marker 
    someMarker = new google.maps.Marker({ 
     position: latlon, 
     map: map, 
     icon: { 
      path: 'M0 -36 L0 -20 24 -20 24 -36 M0 -36 L0 0 1 0 1 -20z', // SVG for flag 
      scale: 1.0, 
      fillColor: "#E6BD00", 
      fillOpacity: 0.8, 
      strokeWeight: 0.3, 
      anchor: new google.maps.Point(0, 0), 
      rotation: 0 
     }, 
     title:title 
    }); 

    // scale marker on different zooms 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
     var zoom = map.getZoom(); 
     var picon = someMarker.getIcon(); 

     if(zoom >=16 && zoom <= 17 && picon.scale != 0.6) 
     { picon.scale=0.6; 
     someMarker.setOptions({icon:picon}); 
     } 
     else if(zoom == 18 && picon.scale != 0.8) 
     { 
     picon.scale=0.8; 
     someMarker.setOptions({icon:picon}); 
     } 
     else if(zoom > 18 && picon.scale != 2.0) 
     { 
     picon.scale=2.0; 
     someMarker.setOptions({icon:picon}); 
     } 
    }); 

Answer 4

Như kaplan chỉ ra, bạn có thể thay đổi kích thước dấu SVG với size và scaledSize.Trong trường hợp của tôi, kết quả vẫn còn lỗi - một số trường hợp của cùng một biểu tượng được hiển thị chính xác, những người khác để lại hiện vật kỳ lạ trên bản đồ.

Tôi đã giải quyết vấn đề này một cách rất đơn giản: Tôi đã xác định width và height trong phần tử <svg>.

Answer 5

Tôi biết đây là một bài đăng cũ, vì vậy chỉ cần cập nhật từ tôi.

Điều này phù hợp với tôi mà không sử dụng MarkerImage, nhưng bắt buộc rằng svg có thuộc tính chiều rộng và chiều cao được đặt.

Và bạn phải sử dụng thuộc tính biểu tượng "scaledSize" để đặt kích thước của biểu tượng trên bản đồ