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

이미지를 마커의 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"
  });
}

답변

원본 크기가 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
});

답변

주석에서 언급했듯이 이것은 문서가있는 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
 });

답변

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

답변

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

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

답변

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

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

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

답변

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

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

답변

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

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