Thay đổi kích thước hình ảnh biểu tượng Google Maps

Khi tôi tải một hình ảnh vào thuộc tính biểu tượng của một điểm đánh dấu, nó sẽ hiển thị với kích thước ban đầu, lớn hơn rất nhiều so với mức cần thiết.

Tôi muốn thay đổi kích thước theo tiêu chuẩn thành kích thước nhỏ hơn. Cách tốt nhất để làm việc này là gì?

Mã số:

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}

Nếu kích thước ban đầu là 100 x 100 và bạn muốn chia tỷ lệ thành 50 x 50, hãy sử dụng scaleedSize thay vì Size.

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});

Như đã đề cập trong các bình luận, đây là giải pháp cập nhật có lợi cho đối tượng Icon với tài liệu.

Sử dụng đối tượng Biểu tượng

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });

MarkerImage đã không được dùng cho Icon

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 xác định là các đối tượng MarkerImage. Đối tượng Icon bằng chữ được thêm vào 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ố tương tự như MarkerImage, cho phép bạn dễ dàng chuyển đổi MarkerImage thành Biểu tượng bằng cách xóa hàm tạo, gói các tham số trước đó trong {} và thêm tên của từng tham số.

Mã của Phillippe bây giờ sẽ là:

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     origin: new google.maps.Point(0,0), // origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });

Xóa nguồn gốc và neo sẽ là hình ảnh thường xuyên hơn

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });

Một người mới bắt đầu hoàn thành như tôi đối với chủ đề có thể khó thực hiện một trong những câu trả lời này hơn, nếu trong tầm kiểm soát của bạn, tự thay đổi kích thước hình ảnh bằng trình chỉnh sửa trực tuyến hoặc trình chỉnh sửa ảnh như Photoshop.

Hình ảnh 500x500 sẽ xuất hiện lớn hơn trên bản đồ so với hình ảnh 50x50.

Không cần lập trình.

Vì vậy, tôi chỉ có vấn đề tương tự, nhưng một chút khác biệt. Tôi đã có biểu tượng như một đối tượng như Philippe Boissonneault gợi ý, nhưng tôi đang sử dụng hình ảnh SVG.

Điều đã giải quyết nó cho tôi là:
Chuyển từ hình ảnh SVG sang PNG và theo Catherine Nyo để có một hình ảnh có kích thước gấp đôi những gì bạn sẽ sử dụng.

Nếu bạn đang sử dụng vue2-google-maps như tôi, mã để đặt kích thước trông như thế này:

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>