Google地图：获取标记点击侦听器内的点击或标记（x，y）像素坐标

我试图在标记点击上显示地图标记上的完全自定义信息窗口。 我已经成功实现了这个答案，以获得一个div来显示地图canvas点击…但我无法在标记点击上复制它。

是否可以在标记点击function中获取标记像素位置，并抑制正常信息窗口显示所需的自定义信息窗口？

我试过这个：

google.maps.event.addListener(marker, 'click', function(args) { var x=args.pixel.x+$('#map').offset().left; //we clicked here var y=args.pixel.y; info.style.left=x+'px'; info.style.top=y+'px'; info.style.display='block'; }); 

但在控制台中，我看到：

 Uncaught TypeError: Cannot read property 'x' of undefined 

Answer 1

标记单击事件返回MouseClickEvent

MouseClickEvent唯一记录的属性是：

latLng LatLng事件发生时光标下方的纬度/经度。

要将其转换为像素位置，请使用MapCanvasProjection的fromLatLngToContainerPixel方法：

  google.maps.event.addListener(marker, 'click', function (e) { var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng); info.style.left = point.x + 'px'; info.style.top = point.y + 'px'; info.style.display = 'block'; }); 

工作小提琴

代码段：

 var geocoder; var map; var overlay; function initialize() { var 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 }); var marker = new google.maps.Marker({ map: map, draggable: true, position: map.getCenter() }); google.maps.event.addListener(map, 'projection_changed', function () { overlay = new google.maps.OverlayView(); overlay.draw = function () {}; overlay.setMap(map); var info = document.getElementById('myinfo'); google.maps.event.addListener(marker, 'click', function (e) { var point = overlay.getProjection().fromLatLngToContainerPixel(e.latLng); info.style.left = (point.x - 100)+ 'px'; info.style.top = (point.y) + 'px'; info.style.display = 'block'; }); google.maps.event.addListener(map, 'center_changed', function (e) { var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); info.style.left = (point.x - 100)+ 'px'; info.style.top = (point.y) + 'px'; info.style.display = 'block'; }); google.maps.event.addListener(marker, 'drag', function (e) { var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); info.style.left = (point.x - 100)+ 'px'; info.style.top = (point.y) + 'px'; info.style.display = 'block'; }); }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } div.info { position: absolute; z-index: 999; width: 200px; height: 50px; display: none; background-color: #fff; border: 3px solid #ebebeb; padding: 10px; } 

  
 
 
I am a div on top of a google map ..
  

Answer 2

以下是获取像素位置的方法：

 function getPixelLocation(currentLatLng) { var scale = Math.pow(2, map.getZoom()); // The NorthWest corner of the current viewport corresponds // to the upper left corner of the map. // The script translates the coordinates of the map's center point // to screen coordinates. Then it subtracts the coordinates of the // coordinates of the map's upper left corner to translate the // currentLatLng location into pixel values in the 
 element that hosts the map. var nw = new google.maps.LatLng( map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng() ); // Convert the nw location from geo-coordinates to screen coordinates var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); // Convert the location that was clicked to screen coordinates also var worldCoordinate = map.getProjection().fromLatLngToPoint(currentLatLng); var currentLocation = new google.maps.Point( Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) ); console.log(currentLocation); return currentLocation; } 

Answer 3

在Radio的帮助下，我能够解决这个问题。 向他推销。

  
I am a div on top of a google map .. 
  

Answer 4

另外一个选项。 使用InfoBox第三方库 。 它inheritance自OverlayView，您可以将“完全自定义”的div放入其中。

概念certificate小提琴

 var geocoder; var map; var overlay; function initialize() { var 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 }); var marker = new google.maps.Marker({ map: map, draggable: true, position: map.getCenter() }); var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;"; boxText.innerHTML = "I am a div on top of a google map .."; var myOptions = { content: boxText, disableAutoPan: false, maxWidth: 0, pixelOffset: new google.maps.Size(-75, -10), zIndex: null, boxStyle: { background: "url('tipbox.gif') no-repeat", opacity: 0.75, width: "150px" }, closeBoxMargin: "0px 0px 0px 0px", closeBoxURL: "", infoBoxClearance: new google.maps.Size(0, 0), isHidden: false, pane: "floatPane", enableEventPropagation: false }; var info = new InfoBox(myOptions); info.open(map, marker); google.maps.event.addListener(marker, 'click', function() { // info.setContent('
I am a div on top of a google map ..
'); info.open(map, marker); }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } div.info { position: absolute; z-index: 999; width: 200px; height: 50px; display: none; background-color: #fff; border: 3px solid #ebebeb; padding: 10px; }