使用rightclick事件从Google Maps API 3获取坐标

Question

I have this simple maps code, but for some reason on the rightclick event the alert is not triggered. 我有这个简单的地图代码，但是由于某些右键事件，警报不会触发。 Could someone help spotting the problem and explaining it? 有人可以帮助发现问题并进行解释吗？

<!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>

Answer 1

You create map inside the function initialize , so you must add the listener also in initialize , otherwise map will be undefined at the moment when you try to add the listener. 您在函数initialize创建了map ，因此必须在initialize也添加侦听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>

Answer 2

Here is an example 这是一个例子

<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>

Answer 3

You need to define right click function. 您需要定义右键单击功能。

/*
  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! */
    }
});

See How to distinguish between left and right mouse click with jQuery 请参阅如何使用jQuery区分鼠标左键和鼠标右键

使用rightclick事件从Google Maps API 3获取坐标

问题描述

3 个解决方案

解决方案1
3 已采纳 2014-10-27 06:53:17

解决方案2
1 2014-10-27 10:44:40

解决方案3
0 2014-10-27 05:48:16

使用rightclick事件从Google Maps API 3获取坐标

问题描述

3 个解决方案

解决方案1 3 已采纳 2014-10-27 06:53:17

解决方案2 1 2014-10-27 10:44:40

解决方案3 0 2014-10-27 05:48:16

解决方案1
3 已采纳 2014-10-27 06:53:17

解决方案2
1 2014-10-27 10:44:40

解决方案3
0 2014-10-27 05:48:16