Google지도 맞춤 마커 Retina 해상도

저는 html5로 iPhone 앱을 개발하고 Phonegap으로 빌드를 만들고 있습니다. 다음과 같이 는 응용 프로그램에서 사용자 정의 마커 구글지도 거기, 마커 아이콘 생성하는 방법은 다음과 같습니다 아이콘의의Google지도 맞춤 마커 Retina 해상도

var image = new google.maps.MarkerImage("hat.png", null, null, null, new google.maps.Size(20,30)); 
var shadow = new google.maps.MarkerImage("shadow.png", null, null, null, new google.maps.Size(20,30)); 

var marker = new google.maps.Marker({ 
       map: map, 
       position: latlng, 
       index: markers.length, 
       icon: image,      
       shadow: shadow, 
       animation: google.maps.Animation.DROP, 
       html: htmlContent             
      });

실제 크기는 코드에 정의 된 크기에 비해 두 배 크기입니다. 이것은 아이콘이 망막 디스플레이에 고해상도로 표시되는지 확인하기 위해 수행됩니다. 위의 코드는 오늘까지 작동했지만 지금은 다음과 같습니다.

google.maps.Animation.DROP를 사용하여 아이콘을 드롭 다운하면 아이콘이 고해상도로 표시되지만지도에 아이콘이 표시되면 아이콘이 낮은 해상도로 전환됩니다. 해상도 버전.

경험 한 사람이 있습니까?

http://maps.googleapis.com/maps/api/js?v=3.0

그래서 나는 그것이 최신하여 Goolge 맵 API의 버그 같아요 :

는

UPDATE 내가 같은 구글 맵 버전을 지정하면 것을 발견 ... 감사합니다.

출처

2012-02-09 andkjaer

방금이 문제도 발견되었습니다. 버그는 API의 최신 버전 (v3.7)에있는 것으로 보이므로 URL 매개 변수? v = 3.6을 통해 v3.6을 지정하면 올바르게 작동합니다.

업데이트 : 버전 3.8 이상에서는 망막 이미지를 사용하고 싶다면 optimized : false를 사용할 수 있습니다. 이것은 최적화 되었기 때문입니다 : true는 모든 스프라이트를 가져 와서 함께 묶어 마스터 스프라이트로 만듭니다. 즉, 마커가 거의없는 경우에만이 작업을 수행해야합니다. 또한 Clusterer와는 잘 작동하지 않습니다.

기본값은 이제 최적화되었습니다. 즉, 장치가 더 높은 해상도로 마스터 스프라이트를 만들기 전에 고해상도 아이콘 렌더링을 처리 할 수 있는지 먼저 결정됩니다. 예를 들어 망막 맥북 프로에 많은 마커가있는지도를로드하면 고해상도로 표시되지만 iPhone 4를 사용해도 그렇지 않습니다. iPhone 4에 최적화 된 : false를 사용하도록 강요하고 마커가 많으면 더듬을 수 있습니다. 4S에 대해서는 확신 할 수 없지만 더 나은 처리 능력을 가지고 있기 때문에 아마도 고해상도 버전을 사용한다고 가정합니다.

출처

2012-02-12 18:30:28

더 낮은 해상도로 아이콘을 전환 한 경우 맵 API가 캔버스를 사용하여 아이콘을 렌더링 (그룹화 및 기타 분류)하여 분명히 빠른 사용자 환경을 제공하기 때문입니다. 그래서 기술적으로 버그가 아니지만, 그것은 버그 것들 (오래된 즉 같은) 특정 브라우저에

일어날 유발하지만 사용 MarkerOptions에서 해제하는 데 사용할 수있는 설정이 있습니다 optimized: false

var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng, 
      icon: image,      
      shadow: shadow, 
      optimized: false            
     });

출처

2012-02-22 04:21:14

size 대신 scaledSize을 사용하여 이미지의 너비와 높이를 정의하여이를 해결했습니다.https://developers.google.com/maps/documentation/javascript/3.exp/reference#Icon

출처

2014-08-01 13:41:43

정확한 답변 인 것으로 보입니다 – user1095118

마크 업과의 일부 링크는 매우 우수합니다 – m1crdy

gMaps api 사이트 [여기] (https://developers.google.com/maps/documentation/javascript/markers#)에서이를 참조하십시오. conversiontoicon), 그들이 사용 된 것을 언급하지는 않습니다. :/ – LuudJacobs

스케일 크기 속성은 올바른 여기에 구글에 의해 참조로 사용할 하나입니다 80px PNG.

출처

2015-10-25 02:55:57

답변 해 주셔서 감사합니다! 링크가 가끔씩 사라지기 때문에 조금 더 자세하게 추가하는 것이 도움이 될 것입니다. 감사! –

간단히 url, size와 객체를 사용하고 scaledSize 속성 :

var icon = { 
    url: 'path/img/[email protected]', 
    size: new google.maps.Size(30, 40), 
    scaledSize: new google.maps.Size(30, 40) 
};

path/img/[email protected]가 60px x는

출처

2017-07-27 13:30:17 Tim

Google지도 맞춤 마커 Retina 해상도

답변

관련 문제