Google지도 마커 아이콘 이미지 크기 조정


141

이미지를 마커의 icon 속성에로드하면 원래 크기로 표시됩니다.

표준 크기를 더 작은 크기로 조정하고 싶습니다. 가장 좋은 방법은 무엇입니까?

암호:

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

답변:


317

원본 크기가 100 x 100이고 크기를 50 x 50으로 조정하려면 크기 대신 scaledSize를 사용하십시오.

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

이것이 API v3에서 수행하는 방법입니다.
Dean_Wilson

scaledSize대신 scale= 사랑
Made in Moon

아이콘을 위치에 올바르게 맞추려면 앵커 포인트로 회전하십시오.
bluedot

64

주석에서 언급했듯이 이것은 문서가있는 Icon 객체를 선호하는 업데이트 된 솔루션입니다.

아이콘 객체 사용

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

12
MarkerImage는 더 이상 사용되지 않습니다. 대신 icon 객체를 사용하십시오!
Bertaud

8
이것은 이미지의 크기를 조정하지 않지만 자릅니다?
Luis A. Florit

해당 객체 icon object의 사용 및 scaledSize: new google.maps.Size(h, w)속성
Sverrir Sigmundarson

2
@SverrirSigmundarson 그것은 new google.maps.Size(w, h)h, w 가 아니어야 함
라비 램

@RaviRam 사실 당신이 맞습니다 ,이 수정에 감사드립니다.
Sverrir Sigmundarson

14

Icon에서 MarkerImage가 더 이상 사용되지 않습니다

Google Maps JavaScript API 버전 3.10까지 복잡한 아이콘은 MarkerImage 객체로 정의되었습니다. Icon 객체 리터럴은 3.10에 추가되었으며 MarkerImage를 버전 3.11부터 대체합니다. Icon 객체 리터럴은 MarkerImage와 동일한 매개 변수를 지원하므로 생성자를 제거하고 {}의 이전 매개 변수를 래핑하고 각 매개 변수의 이름을 추가하여 MarkerImage를 Icon으로 쉽게 변환 할 수 있습니다.

Phillippe의 코드는 다음과 같습니다.

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

3
나는 이것이 이미지의 크기를 조정하지는 않지만 잘라냅니다.
Luis A. Florit

9
당신은 scaledSize오히려 원한다 size.
bbodenmiller

예, @bbodenmiller에 동의하십시오 .scaledSize는 당신이 찾고있는 것일 수 있습니다. 내 프로젝트에는 scaledSize를 사용하며 저에게 효과적입니다. var icon = {url : imageName, scaledSize : 새로운 google.maps.Size (8, 12)};
user908645

7

원점과 앵커를 삭제하면 더 규칙적인 그림이됩니다.

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

이것은 나를 위해 일했다! Marker 코드 내에서 scaledImage 매개 변수를 설정하려고 시도하면 작동하지 않습니다.
Dumber_Texan2

1

나 자신과 같은 주제에 대한 완전한 초보자는 컨트롤 내 에서 온라인 편집기 나 Photoshop과 같은 사진 편집기를 사용하여 직접 이미지 크기조정하는 것보다 이러한 답변 중 하나를 구현하기가 더 어려울 수 있습니다 .

500x500 이미지는 50x50 이미지보다지도에서 더 크게 나타납니다.

프로그래밍이 필요하지 않습니다.


1

그래서 나는이 같은 문제가 있었지만 조금 다릅니다. Philippe Boissonneault가 제안한 것처럼 이미 아이콘을 객체로 사용했지만 SVG 이미지를 사용하고있었습니다.

나를 위해 해결 한 것은 :
SVG 이미지에서 PNG로 전환하고 Catherine Nyo 를 따라 사용할 이미지의 두 배 크기의 이미지를 사용하십시오.


0

나와 같은 vue2-google-maps를 사용하는 경우 크기를 설정하는 코드는 다음과 같습니다.

<gmap-marker
  ..
  :icon="{
    ..
    anchor: { x: iconSize, y: iconSize },
    scaledSize: { height: iconSize, width: iconSize },
  }"
>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.