Question

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

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

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>

Google Maps Marker自定义上下文菜单

1 个答案: