javascript - 谷歌地图标记自定义上下文菜单

Question

我正在尝试为谷歌地图创建一个自定义上下文菜单，该菜单仅在我单击标记时才有效，但我正在使用的此上下文菜单将在我单击的任何位置显示上下文菜单。我想专门为 map 标记制作上下文菜单。

HTML:

<div id="map" style="width:100%;height:500px"></div>
<div class="menu" id="menu">
    <div class="menu-item"><i class="glyphicon glyphicon-file"></i>Manage files</div>
</div>

JS:

function myMap() {
    var menuDisplayed = false;
    var menuBox = null;
    var myCenter = new google.maps.LatLng(51.508742,-0.120850);
    var mapCanvas = document.getElementById("map");
    var mapOptions = {center: myCenter, zoom: 5};
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new google.maps.Marker({position:myCenter});
    marker.setMap(map);
    window.addEventListener("contextmenu", function() {
        var left = arguments[0].clientX;
        var top = arguments[0].clientY;

        menuBox = document.getElementById("menu");
        menuBox.style.left = left + "px";
        menuBox.style.top = top + "px";
        menuBox.style.display = "block";

        arguments[0].preventDefault();

        menuDisplayed = true;
    }, false);
    window.addEventListener("click", function() {
        if(menuDisplayed == true){
            menuBox.style.display = "none"; 
        }
    }, true);

}

CSS:

.menu {
    width: 150px;
    box-shadow: 3px 3px 5px #888888;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    border-radius: 2px;
    position: fixed;
    display: none;
}

.menu-item {
    height: 20px;
    background-color: white;
}

.menu-item:hover {
    background-color: #6CB5FF;
    cursor: pointer;
}

Answer 1

一个选项不是捕获对 window 对象的所有点击，而是捕获标记上的 rightclick，打开上下文菜单，在单击 map 。

marker.addListener("rightclick", function(e) {
  for (prop in e) {
    if (e[prop] instanceof MouseEvent) {
      mouseEvt = e[prop];
      var left = mouseEvt.clientX;
      var top = mouseEvt.clientY;

      menuBox = document.getElementById("menu");
      menuBox.style.left = left + "px";
      menuBox.style.top = top + "px";
      menuBox.style.display = "block";

      mouseEvt.preventDefault();

      menuDisplayed = true;
    }
  }
});
map.addListener("click", function(e) {
  if (menuDisplayed == true) {
    menuBox.style.display = "none";
  }
});

proof of concept fiddle

代码片段:

function myMap() {
  var menuDisplayed = false;
  var menuBox = null;
  var myCenter = new google.maps.LatLng(51.508742, -0.120850);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: myCenter,
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({
    position: myCenter
  });
  marker.setMap(map);
  marker.addListener("rightclick", function(e) {
    for (prop in e) {
      if (e[prop] instanceof MouseEvent) {
        mouseEvt = e[prop];
        var left = mouseEvt.clientX;
        var top = mouseEvt.clientY;

        menuBox = document.getElementById("menu");
        menuBox.style.left = left + "px";
        menuBox.style.top = top + "px";
        menuBox.style.display = "block";

        mouseEvt.preventDefault();

        menuDisplayed = true;
      }
    }

  });
  map.addListener("click", function(e) {
    if (menuDisplayed == true) {
      menuBox.style.display = "none";
    }
  });
}
google.maps.event.addDomListener(window, "load", myMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.menu {
  width: 150px;
  box-shadow: 3px 3px 5px #888888;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  border-radius: 2px;
  position: fixed;
  display: none;
}

.menu-item {
  height: 20px;
  background-color: white;
}

.menu-item:hover {
  background-color: #6CB5FF;
  cursor: pointer;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div class="menu" id="menu">
  <div class="menu-item"><i class="glyphicon glyphicon-file"></i>Manage files</div>
</div>