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

Question

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

.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，打开上下文菜单，在地图上单击时将其关闭。

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";
  }
});

概念验证小提琴

代码片段：

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>