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

【问题标题】：Google maps marker custom context menu谷歌地图标记自定义上下文菜单
【发布时间】：2018-08-08 13:18:08
【问题描述】：

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

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

【问题讨论】：

标签： javascript html google-maps

【解决方案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";
  }
});

proof of concept fiddle

代码 sn-p：

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>

【讨论】：