How to add markers on double-click?

We’ve learned how to add markers on map. In that example, the marker is added when the map is loaded, and its location is predetermined. How to add a marker on demand, i.e., on double-click? We also learned how to add event listeners. Now we can combine the two techniques to add markers on double-click event.

map.addEventListener("dblclick",function(e){
  var myIcon = new BMap.Icon("heart.png", new BMap.Size(48, 48), {anchor: new BMap.Size(24, 48)});  
  var marker = new BMap.Marker(e.point,{icon: myIcon});  
  map.addOverlay(marker); 
});

The handler for double-click event has an event parameter which contains the point(e.point) where the double-click happened. We just need to take that parameter to construct the marker object. Now every time a user double clicks, a marker is added to that location. If you run this example, you will find although the marker can be successfully created, the map zooms out automatically when double-clicking, which is a little distracting. This auto zoom is the default behavior of baidu map. You can disable the auto zoom on double-click by calling: