Right-click menu

1.1 Create Map

const map = new AMap.Map("container", {
  zoom: 10, 
  center: [100.491422, 13.749313],
  showOversea: true, //Enable world Map
  mapStyle: "amap://styles/whitesmoke", 
  viewMode: "2D", 
});

1.2 Create menu instance

var contextMenu = new AMap.ContextMenu();

1.3 Add menu function

//Right-click to zoom
contextMenu.addItem("Zoom in one level", function () {
  map.zoomIn();
}, 0);
//Right-click to zoom out
contextMenu.addItem("Zoom out one level", function () {
  map.zoomOut();
}, 1);

Using the contextMenu.addItem(text, fn, num) method, you can add functionality to the menu, where the text parameter is the text content displayed on the menu, the fn parameter specifies the callback function to be executed when the user clicks the menu item, and the num parameter determines the position of the menu item in the menu.

1.4 Bind right-click menu event

//Map binds right-click event—pop-up right-click menu
map.on('rightclick', function (e) {
  contextMenu.open(map, e.lnglat);
});

Using the contextMenu.open(map, position) method, you can open the right-click menu. The map parameter represents the current map instance, and the position parameter specifies the location where the menu pops up.