开发者

Turn image in google maps V3?

I need help with JavaScript in google map v3 I have an image and I need to be able to turn it. That works, but the real problem it's that I cant afect an marker cause I don't know how to call it and modify this marker. I show you a part of the code:

Marker:

sURL    =  'http://w开发者_StackOverflow社区ww.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
});

Then I have this :

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" />

So here is it. As you can see, I'm afecting this image and I in fact I need to afect the marker. How can I do it ? Please I need this I'been working in it since hours and hours. Thank you !!


Unfortunately the Google Maps API doesn't provide any methods for accessing the img-element(I've look for it many many times). The img-elements are mixed in the DOM-tree and are therefore searchable. ie:

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

This will turn ALL img-elments with the specified src, you could add more condition to the if statement to be more specific.

But this is usually not good solution since often more markers then one has the same img src.

I would make more then one image and rotate them in Photoshop (or any other image manipulation tool) and then create a new MarkerImage for each variant you want to use. And the change the marker's image with .setIcon(). ie:

oMarker.setIcon(mImage);

..fredrik


In my project I want to rotate an image. Thats why I build a lot of markerImages: for (var i=1; i<31;i++) { nadelimages[i] = new 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) );

Now: var rotatePin = function() { ni= ni+1 if (ni>29) ni=1; nadelMarkers[1].setIcon(nadelimages[ni]); setTimeout(rotatePin,100); }

In the solution above setIcon dont update but it insert the new marker image. The number of markers are growing.

var rotatePin = function() { ni= ni+1 if (ni>29) ni=1; nadelMarkers[1].setIcon('./static/map/Kompass_'+ni+'.png'); setTimeout(rotatePin,100); }

In this case it works fine, but the center is not the center of the image but it ist centerbottom.

Other solutions?

Rainer

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜