使用右鍵點擊事件獲取Google Maps API 3的座標

我有這個簡單的地圖代碼，但由於某種原因，在右鍵點擊事件中不會觸發警報。有人能幫助發現問題並解釋嗎？使用右鍵點擊事件獲取Google Maps API 3的座標

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
var map; 
function initialize() { 
var mapOptions = { 
zoom: 8, 
center: new google.maps.LatLng(-34.397, 150.644) 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

google.maps.event.addListener(map, 'rightclick', function(event) { 
var lat = event.latLng.lat(); 
var lng = event.latLng.lng(); 
alert("Lat=" + lat + "; Lng=" + lng); 
}); 

</script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html>

來源

2014-10-27 Sandor

你確定了'rightclick'事件得到妥善處理？嘗試在事件處理程序內外的適當位置執行「console.log」以進行調試。 – 2014-10-27 05:06:11

您的功能initialize中創建map，所以還必須添加聽者initialize，否則map將undefined的時刻，當你嘗試添加監聽器。

<script> 
var map; 
function initialize() { 
var mapOptions = { 
zoom: 8, 
center: new google.maps.LatLng(-34.397, 150.644) 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 
    google.maps.event.addListener(map, 'rightclick', function(event) { 
var lat = event.latLng.lat(); 
var lng = event.latLng.lng(); 
alert("Lat=" + lat + "; Lng=" + lng); 
}); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

來源

2014-10-27 06:53:17

您需要定義右鍵單擊功能。

/* 
    1 = Left mouse button 
    2 = Centre mouse button 
    3 = Right mouse button 
*/ 

$([selector]).mousedown(function(e) { 
    if (e.which === 3) { 
     /* Right mouse button was clicked! */ 
    } 
});

見How to distinguish between left and right mouse click with jQuery

來源

2014-10-27 05:48:16 UtkarshBhavsar

他定義了一個右鍵功能（'rightclick'是由maps-API實現的一個事件）。使用jQuery（或其他）不會在這裏幫助，因爲DOMMouseEvent不會公開LatLng。 – 2014-10-27 07:04:53

下面是一個例子

<head> 
    <style> 
    html, body, #map-canvas { 
     height: 400px; 
     margin: 0px; 
     padding: 0px 
    } 
    #display { 
     width: 100%; 
    } 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"> 
    </script>  
    <script> 
    var map; 
    var myLocation = { // Belgium 
     'latitude': 50.5, 
     'longitude': 4.5 
    }; 
    var myLatlng = new google.maps.LatLng(myLocation.latitude, myLocation.longitude); 
    var mapOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var displayElement = document.getElementById('display'); 
     // Add a right click event 
     // @see http://stackoverflow.com/questions/7168394/google-map-v3-context-menu 
     var contextMenu = google.maps.event.addListener(
     map, 
     "rightclick", 
     function(event) { 
      // just as an example, I write the data to the input 
      displayElement.value = 
      'mouse: ' + event.pixel.x +','+ event.pixel.y + 
      ' ||| coordinates: ' + event.latLng.lat() +','+ event.latLng.lng() ; 
     } 
    ); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <input id="display"> 
    <div id="map-canvas"></div> 
</body>

來源

2014-10-27 10:44:40

使用右鍵點擊事件獲取Google Maps API 3的座標

回答

相關問題