2011-01-10 1 views
1

Google지도 v3에서 JavaScript가 도움이 필요합니다. 이미지가 있고 전환 할 수 있어야합니다. 그게 효과가 있지만 진짜 문제는 그것이 내가 마커를 어떻게 불러야하고이 마커를 수정해야할지 모르기 때문입니다.Google지도 V3에서 이미지를 넘기시겠습니까?

마커 :

sURL = 'http://www.sl2o.com/tc/picture/Fleche.PNG'; 
iWidth = 97; 
iHeight = 100; 

mImage = new google.maps.MarkerImage(sURL, new google.maps.Size(iWidth,iHeight), new google.maps.Point(0,0), new google.maps.Point(Math.round(iWidth/2),Math.round(iHeight/2))); 

var oMarker = new google.maps.Marker({ 
'position': new google.maps.LatLng(iStartLat,iStartLon), 
'map': map, 
'title': 'mon point', 
'icon': mImage 
}); 

가 그럼 난이 있습니다 : 그것은

그래서 여기
onload=function(){ 
rotate.call(document.getElementById('im'),50); 
} 
</script> 
<img id="im" src="http://www.sl2o.com/tc/picture/Fleche.PNG" width="97" height="100" /> 

이다 나는 당신에게 코드의 일부를 보여줍니다. 보시다시피, 저는이 이미지를 손상시키고 있습니다. 사실 저는 마커를 완성해야합니다. 내가 어떻게 해 ? 제 시간에 몇 시간 씩 일하고 싶습니다. 고맙습니다 !!

답변

0

Google지도 API는 img 요소에 액세스하기위한 방법을 제공하지 않습니다. 여러 번 찾아 왔습니다. img 요소는 DOM 트리에서 혼합되어 검색 할 수 있습니다. 예 : 문이 더 구체적으로 경우

var imgElements = document.getElementsByTagName('img'), 
    i = 0; 
for (i = 0; i < imgElements.length; i+= 1) { 
    if (imgElements[i].src === 'http://www.sl2o.com/tc/picture/Fleche.PNG') { 
     rotate.call(imgElements[i], 50); 
    } 
} 

이 지정된 SRC와 ALL IMG-elments으로 바뀔 것이다, 당신은 더 많은 조건을 추가 할 수 있습니다.

그러나 일반적으로 마커가 더 많고 img src가 같기 때문에 일반적으로 좋은 해결책이 아닙니다.

나는 하나 이상의 이미지를 만들고 Photoshop (또는 다른 이미지 조작 도구)에서 이미지를 회전 한 다음 사용할 각 변형에 대해 새로운 MarkerImage를 만듭니다. .setIcon()으로 마커의 이미지를 변경합니다. 예 : 내 프로젝트에서

oMarker.setIcon(mImage); 

..fredrik

+0

정말 고마워요! 그러나 어떻게 이것을 내 코드에서 사용할 수 있습니까? 나는 그것을 적응할 수 없다, sory 나는 JS에서 새내기 다 : S – Ilrodri

+0

당신이 사용하고 싶은 두 가지 솔루션에 따라 다르다. 나는 강하게 두 번째 것을 제안 할 것이다. – fredrik

+0

예, 나도 그래요.하지만 이번에는 제가 진짜 필요합니다. 어쨌든 하나의 이미지 만 사용하게 될 것입니다. – Ilrodri

0

을 나는 이미지를 회전합니다. 내가 markerImages를 많이 만들 이유 그게 : (VAR I = 1; 내가 < 31; 내가 ++)에 대한 { nadelimages [I] = 새로운 google.maps.MarkerImage ( './static/map/Kompass_'+i+ '.png', new google.maps.Size (w, w), new google.maps.Point (0,0), new google.maps.Point (w/2, w/2) );

지금 : VAR의 rotatePin = 함수() { 니켈의 NI = + 1 경우 (NI> 29) NI = 1; nadelMarkers [1] .setIcon (nadelimages [ni]); setTimeout (rotatePin, 100); }의 setIcon 위의 솔루션에서

갱신을 해달라고하지만 새로운 마커 이미지 삽입 . 마커의 수가 증가하고 있습니다.

var rotatePin = function() { ni = ni + 1 if (ni> 29) ni = 1; nadelMarkers [1] .setIcon ('./ 정적 /지도/Kompass _'+ ni + '. png'); setTimeout (rotatePin, 100); }

이 경우에는 문제가 없지만 가운데가 이미지의 가운데가 아니라 가운데에 있습니다.

다른 솔루션?

Rainer