如何弹出显示确切的右键单击事件位置

时间:2016-06-23 01:38:05

标签: javascript jquery html css google-maps-api-3

我有以下代码,但我的Pop没有显示我的右键单击的确切位置,请帮助。如何在我的右键单击确切位置弹出显示

  function openPopup() {
             //document.getElementById('test').style.display = 'block';
             $('#test').fadeIn(1000);
         }

         function closePopup() {
             //document.getElementById('test').style.display = 'none';
             $('#test').fadeOut(500);
         }
 google.maps.event.addListener(_map, "rightclick", function (event) {
                 openPopup();
             });

  
    
      .popup {
    position:fixed;
    top:0px;
    left:0px;
	bottom:0px;
   
    padding:10px;
    background-color:rgb(240,240,240);
    border:2px solid grey;
    z-index:100000000000000000;
}
    
.cancel {
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;

    z-index:100000000000000000;
}

.cancel:hover {
    background:rgb(255,50,50);
}
  <div id="test" class="popup" style="display:none;">
    This is a test message
    <div class="cancel" onclick="closePopup();"></div>
</div>

enter image description here

1 个答案:

答案 0 :(得分:2)

您不需要为此创建新的弹出框,您可以使用Google var map; var markers = []; var latalng = {lat:26.912082488274702, lng:75.81622123718262} var infowindow; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: latalng, zoom: 17 }); //infoWindow Object infowindow = new google.maps.InfoWindow(); //add event to right click map.addListener('rightclick', function(event) { //Set content to show on popup infowindow.setContent("Your Messaage To show"); //get the position form google.maps.MouseEvent class passed in event objevc var latLang = { lat: event.latLng.lat(),lng:event.latLng.lng()}; //set the position of popup(infowindow) infowindow.setPosition(latLang); //open infowindow infowindow.open(map, this); }); }

来执行此操作

使用此

{{1}}