javascript - MarkerWithLabel - drag event works like click event - Stack Overflow

admin管理员组

文章数量:1022560

I set a marker on click on the map. I use MarkerWithLabel.

I use draggable marker.

If I drag a marker it works fine. But if I drag a label it works with click event on the map.

How can I use labels and can drag a label without click event?

In my example - when I drag a marker JS creates new marker.

google.maps.event.addListener(map, 'click', function(event) {         
     addMarker(event.latLng)
});

function addMarker(latLng) {
    var marker = new MarkerWithLabel({
          position: latLng,
          map: map,
          draggable: true,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
    });

    google.maps.event.addListener(marker, 'dragend', function(e) {
       alert(2);
    })
}

JSFIDDLE

I set a marker on click on the map. I use MarkerWithLabel.

I use draggable marker.

If I drag a marker it works fine. But if I drag a label it works with click event on the map.

How can I use labels and can drag a label without click event?

In my example - when I drag a marker JS creates new marker.

google.maps.event.addListener(map, 'click', function(event) {         
     addMarker(event.latLng)
});

function addMarker(latLng) {
    var marker = new MarkerWithLabel({
          position: latLng,
          map: map,
          draggable: true,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
    });

    google.maps.event.addListener(marker, 'dragend', function(e) {
       alert(2);
    })
}

JSFIDDLE

• javascript
• google-maps
• google-maps-markers

Share Improve this question Follow edited Apr 27, 2014 at 21:36 user3579209 asked Apr 27, 2014 at 20:51 user3579209user3579209 6133 bronze badges 1

• From documentation - click - This event is fired when the user clicks on the map (but not when they click on a marker or infowindow). But nothing about labels. – Nick Commented Apr 28, 2014 at 14:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +50

You may try something like this (Example) unless you have other solution:

var map, dragended;
// ...

google.maps.event.addListener(map, 'click', function(event) {
    if(!dragended) {
        addMarker(event.latLng);
    }
    dragended = false;
});

google.maps.event.addListener(marker, 'dragend', function(e) {
    var target = e.target || e.srcElement;
    if(target && target.className == 'labels') {
        dragended = true;
    }
    alert(2);
});

The click event is fired when you start dragging (Check this). It's a dirty hack using a global variable but it works if there is no other solution.

Their example page shows what you're looking for in action.

function your_function(e) {  //Callback function
    console.log("Drag: " + e.latLng.toString());
}

//Create map using the #map_canvas element
var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(49.47805, -123.84716),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

//Create new MarkerWithLabel (enhanced version of a Marker)
var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(49.47805, -123.84716),
    draggable: true,
    raiseOnDrag: true,
    map: map,  //Attach to map
    labelContent: "example",
    labelAnchor: new google.maps.Point(22, 0),
    labelClass: "labels" // the CSS class for the label
});

//Finally add a listener to the marker to call your_function when "drag" event has occurred.
google.maps.event.addListener(marker, "drag", your_function );

That's all the magic you need, I guess.

---

Edit: Upon further investigation of your Fiddle, I noted a the event bubble leak from the marker label to map. Since there's no known way to stop the event propagation from bubbling into a different type, you can set a variable to keep track of this scenario and clear it once it's triggered. Related SO question. You can optionally just set an actual local variable in the same scope as map, either way will work.

JSFiddle.

try using markerwithlabel.js change, its a code for the change in markerwithlabel.js. Through this you can avoid or ignore the click on label with marker dragend or label dragend.

I set a marker on click on the map. I use MarkerWithLabel.

I use draggable marker.

If I drag a marker it works fine. But if I drag a label it works with click event on the map.

How can I use labels and can drag a label without click event?

In my example - when I drag a marker JS creates new marker.

google.maps.event.addListener(map, 'click', function(event) {         
     addMarker(event.latLng)
});

function addMarker(latLng) {
    var marker = new MarkerWithLabel({
          position: latLng,
          map: map,
          draggable: true,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
    });

    google.maps.event.addListener(marker, 'dragend', function(e) {
       alert(2);
    })
}

JSFIDDLE

I set a marker on click on the map. I use MarkerWithLabel.

I use draggable marker.

If I drag a marker it works fine. But if I drag a label it works with click event on the map.

How can I use labels and can drag a label without click event?

In my example - when I drag a marker JS creates new marker.

google.maps.event.addListener(map, 'click', function(event) {         
     addMarker(event.latLng)
});

function addMarker(latLng) {
    var marker = new MarkerWithLabel({
          position: latLng,
          map: map,
          draggable: true,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
    });

    google.maps.event.addListener(marker, 'dragend', function(e) {
       alert(2);
    })
}

JSFIDDLE

• javascript
• google-maps
• google-maps-markers

Share Improve this question Follow edited Apr 27, 2014 at 21:36 user3579209 asked Apr 27, 2014 at 20:51 user3579209user3579209 6133 bronze badges 1

• From documentation - click - This event is fired when the user clicks on the map (but not when they click on a marker or infowindow). But nothing about labels. – Nick Commented Apr 28, 2014 at 14:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +50

You may try something like this (Example) unless you have other solution:

var map, dragended;
// ...

google.maps.event.addListener(map, 'click', function(event) {
    if(!dragended) {
        addMarker(event.latLng);
    }
    dragended = false;
});

google.maps.event.addListener(marker, 'dragend', function(e) {
    var target = e.target || e.srcElement;
    if(target && target.className == 'labels') {
        dragended = true;
    }
    alert(2);
});

The click event is fired when you start dragging (Check this). It's a dirty hack using a global variable but it works if there is no other solution.

Their example page shows what you're looking for in action.

function your_function(e) {  //Callback function
    console.log("Drag: " + e.latLng.toString());
}

//Create map using the #map_canvas element
var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(49.47805, -123.84716),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

//Create new MarkerWithLabel (enhanced version of a Marker)
var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(49.47805, -123.84716),
    draggable: true,
    raiseOnDrag: true,
    map: map,  //Attach to map
    labelContent: "example",
    labelAnchor: new google.maps.Point(22, 0),
    labelClass: "labels" // the CSS class for the label
});

//Finally add a listener to the marker to call your_function when "drag" event has occurred.
google.maps.event.addListener(marker, "drag", your_function );

That's all the magic you need, I guess.

---

Edit: Upon further investigation of your Fiddle, I noted a the event bubble leak from the marker label to map. Since there's no known way to stop the event propagation from bubbling into a different type, you can set a variable to keep track of this scenario and clear it once it's triggered. Related SO question. You can optionally just set an actual local variable in the same scope as map, either way will work.

JSFiddle.

try using markerwithlabel.js change, its a code for the change in markerwithlabel.js. Through this you can avoid or ignore the click on label with marker dragend or label dragend.

本文标签： javascriptMarkerWithLabeldrag event works like click eventStack Overflow