如何彈出顯示確切的右鍵單擊事件位置

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

}