开发者

Removing the Google Maps V3 Marker drag animation?

开发者 https://www.devze.com 2023-03-20 05:53 出处:网络
When I drag and drop a marker it raises a little bit and a skewed X appears underneath it to denote dragging position.

When I drag and drop a marker it raises a little bit and a skewed X appears underneath it to denote dragging position.

Is there anyway to get rid of this completely? I have custom markers and would like to display their dragging state in a different way.开发者_JAVA百科


You can set the property of the marker raiseOnDrag to false

var marker = new google.maps.Marker({
  draggable: true,
  map: map,
  raiseOnDrag: false
});

And then you could use ScottE solution to create a custom drag effect.


raiseOnDrag is undocumented in the current API version (3.17). Instead there is a crossOnDrag property:

crossOnDrag : boolean - If false, disables cross that appears beneath the marker when dragging. This option is true by default.

https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions


Edit (Sep. 2016): raiseOnDrag is still undocumented in 3.25


I don't believe this is possible. You can change the marker on dragstart / dragend, but this doesn't change the 'x' that shows up underneath.

Here is an example of changing the marker when dragging:

http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-imagechange.html

When you look at the images you'll see that the 'x' is not part of the png.


You also need to then switch the original image back on dragend event.

complete code is like this:

myArrow         = new google.maps.MarkerImage("defaultIcon.png"); 
myArrowDrag     = new google.maps.MarkerImage("draggingIcon.png"); 

myMarker = new google.maps.Marker({
    position    : new google.maps.LatLng(myLat, myLng),
    map         : map,
    icon        : myArrow,
    draggable   : true,
    raiseOnDrag : false
});

google.maps.event.addListener(myMarker, 'dragstart', function() {
    myMarker.setOptions({icon: myArrowDrag});
});
google.maps.event.addListener(myMarker, 'dragend', function() {
    myMarker.setOptions({icon: myArrow});
});
0

精彩评论

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