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

Question

我有以下代码，但我的流行并没有显示我的右键单击的确切位置如何请帮助。如何弹出显示我的右键点击详细的位置

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; 
 
\t 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>

Answer 1

你并不需要创建一个新的弹出该框，你可以用谷歌的google.maps.InfoWindow做到这一点类

使用此

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

}