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

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

이미지를 마커의 아이콘 속성에 로드하면 원래 크기보다 훨씬 큰 원래 크기로 표시됩니다.

저는 표준 사이즈로 작은 사이즈로 사이즈를 조정하고 싶습니다.이것을 하는 가장 좋은 방법은 무엇입니까?

코드:

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

원래 크기가 100 x 100이고 50 x 50으로 스케일링하려면 Size 대신 scaleSize를 사용합니다.

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

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

주석에 언급된 바와 같이, 이것은 문서화된 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
 });

아이콘에 대해 마커 이미지가 더 이상 사용되지 않습니다.

구글 맵스 자바스크립트 API 버전 3.10까지는 복잡한 아이콘이 마커이미지 객체로 정의되었습니다.Icon 개체 리터럴은 3.10에서 추가되었으며 버전 3.11 이후부터는 MarkerImage를 대체합니다.아이콘 개체 리터럴은 마커 이미지와 동일한 매개 변수를 지원하므로 생성자를 제거하고 이전 매개 변수를 {}'s로 래핑하고 각 매개 변수의 이름을 추가하여 마커 이미지를 아이콘으로 쉽게 변환할 수 있습니다.

이제 필립의 코드는 다음과 같습니다.

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

오리진을 삭제하면 앵커가 더 일반적인 그림이 됩니다.

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

저처럼 vue2-google-map을 사용하는 경우 크기를 설정하는 코드는 다음과 같습니다.

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

그래서 저는 같은 문제가 있었지만 조금 달랐습니다.저는 이미 Philippe Boissonneault의 말대로 아이콘을 오브제로 가지고 있었지만 SVG 이미지를 사용하고 있었습니다.

제게 해결해 준 것은 다음과 같습니다.
SVG 이미지에서 PNG로 전환하고 Catherine Nyoon을 따라 사용할 이미지의 두 배 크기로 전환합니다.

저처럼 이 주제에 대해 완전히 초보자라면 온라인 편집기나 포토샵 같은 사진 편집기로 이미지 크기를 조정하는 것보다 이러한 답변 중 하나를 구현하는 것이 더 어려울 수 있습니다.

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

프로그래밍이 필요 없습니다.

언급URL : https://stackoverflow.com/questions/15096461/resize-google-maps-marker-icon-image