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

我想在谷歌地图上添加一个基于lat / lng获取地址的点击事件。 click事件正常工作，但是当我添加对按下的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 + "
" + "Longitude: " + myLng + "
"; 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 + "
"; } }); fnPlaceMarkers(event.latLng,thisAddress,"adhoc"); }; }); }; }); } 

Answer 1

如果您查看Google地图发送给我们的onClick事件，则没有altKey值。 这就是为什么它总是返回false并跳过你的逻辑。

解决方法是使用jquery提供的keydown和keyup回调来存储正在按下的键。

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

因此，您可以检查替换event.altKey是否按下了根据此站点恰好具有值18的alt key 。

Answer 2

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

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

fromDivPixelToLatLng（pixel：Point，nowrap？：boolean）LatLng从保存可拖动地图的div中的像素坐标计算地理坐标。

概念certificate小提琴

代码段：

 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 + "
" + "Longitude: " + myLng + "
"; var i; var clickedPoint = new google.maps.Marker({ position: latLng, map: map, icon: { url: "http://sofzh.miximages.com/jquery/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 + "
"; } }); 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 }