在谷歌地图上进行控制键+点击事件

Question

我想在谷歌地图上添加一个基于纬度/经度获取地址的点击事件。点击事件可以正常工作，但是当我添加检查alt键是否按下时，地理编码逻辑不再起作用。

google.maps.event.addListener(map, 'click', function(event) {                                       

    if (event.altKey) {

        var geocoder= new google.maps.Geocoder();
        var myLat = event.latLng.lat().toFixed(5);
        var myLng = event.latLng.lng().toFixed(5);                      
        var arrAddress = "";
        var thisAddress = "Latitude :" + myLat + "<br/>" +
                          "Longitude: " + myLng + "<br/>";
        var i;

        geocoder.geocode({'latLng': event.latLng}, function(results, status){
            if (status == google.maps.GeocoderStatus.OK) {                                                  
                arrAddress = results[0]['address_components'];
                $.each(arrAddress, function (i, address_component) {
                    if (address_component.types[0] == "route" ||
                        address_component.types[0] == "street_number" ||
                        address_component.types[0] == "locality" ||
                        address_component.types[0] == "postal_code" ||
                        address_component.types[0] == "administrative_area_level_1") {
                            thisAddress += address_component.types[0] +":" + address_component.long_name + "<br/>";
                        }
                }); 
                fnPlaceMarkers(event.latLng,thisAddress,"adhoc");
            };
        });
    };
 });
}

- Mustapha George

Answer 1

如果您查看Google Maps发送给我们的onClick事件，就会发现没有altKey值。这就是为什么它始终返回false并跳过您的逻辑。

一种解决方法是使用jQuery提供的keydown和keyup回调函数来存储按下的键。

keys = {};

$(document).keydown(function (event) {
    keys[event.which] = true;
});

$(document).keyup(function (event) {
    delete keys[event.which];
});

所以你可以检查一下alt键是否被按下，根据这个网站，它的值是18，代替使用event.altKey。

- kaho

Answer 2

一种选择是在地图DOM对象上使用google.maps.event.addDomListener，它是一个本地DOM点击事件，并具有altKey属性。

从本机点击事件（clientX，clientY）中的X / Y坐标，您可以使用MapCanvasProjection方法计算Lat / Lng：

fromDivPixelToLatLng(pixel：Point，nowrap？：boolean) LatLng从包含可拖动地图的div中的像素坐标计算地理坐标。

概念验证fiddle

代码片段：

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  overlay = new google.maps.OverlayView();
  overlay.draw = function() {};
  overlay.setMap(map);

  google.maps.event.addDomListener(document.getElementById("map_canvas"), 'click', function(event) {

    if (event.altKey) {
      var that = this;
      var geocoder = new google.maps.Geocoder();
      var point = new google.maps.Point(event.clientX, event.clientY);
      var latLng = overlay.getProjection().fromDivPixelToLatLng(point);

      var myLat = latLng.lat().toFixed(5);
      var myLng = latLng.lng().toFixed(5);
      var arrAddress = "";
      var thisAddress = "Latitude :" + myLat + "<br/>" +
        "Longitude: " + myLng + "<br/>";
      var i;
      var clickedPoint = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: {
          url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
          size: new google.maps.Size(7, 7),
          anchor: new google.maps.Point(3.5, 3.5)
        }
      });
      geocoder.geocode({
        'latLng': latLng
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

          arrAddress = results[0]['address_components'];
          $.each(arrAddress, function(i, address_component) {
            if (address_component.types[0] == "route" || address_component.types[0] == "street_number" || address_component.types[0] == "locality" || address_component.types[0] == "postal_code" || address_component.types[0] == "administrative_area_level_1") {
              thisAddress += address_component.types[0] + ":" + address_component.long_name + "<br/>";
            }
          });
          fnPlaceMarkers(latLng, thisAddress, "adhoc");
        };
      });
    };
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function fnPlaceMarkers(latlng, address, type) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent(address);
    infowindow.open(map, marker);
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

- geocodezip