Google Maps: permet d’obtenir le clic ou le marqueur (x, y) les coordonnées en pixels dans l’auditeur de clic du marqueur

J’essaie d’afficher des fenêtres d’informations entièrement personnalisées sur les marqueurs de carte lors d’ un clic sur un marqueur . J’ai implémenté avec succès cette réponse pour obtenir une div à afficher sur un clic de carte-canvas … mais je ne suis pas en mesure de la répliquer sur un clic de marqueur.

Est-il possible d’obtenir la position de pixel des marqueurs dans la fonction de clic du marqueur et de supprimer l’infowindow normale pour afficher l’infowindow personnalisée souhaitée?

J’ai essayé ceci:

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'; });

mais dans la console, je vois:

 Uncaught TypeError: Cannot read property 'x' of undefined

Un événement de clic de marqueur renvoie un MouseClickEvent

La seule propriété documentée d’un MouseClickEvent est:

latLng LatLng La latitude / longitude qui était sous le curseur lorsque l’événement s’est produit.

Pour convertir cela en une position de pixel, utilisez la méthode fromLatLngToContainerPixel de MapCanvasProjection :

  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'; });

travail du violon

extrait de code:

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

Voici comment vous obtenez l’emplacement du pixel:

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

Avec l’aide de Radio, j’ai pu résoudre ce problème. Upvote lui.

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

Une autre option. Utilisez la bibliothèque tierce InfoBox . Il hérite de OverlayView et vous pouvez y placer votre div “entièrement personnalisé”.

preuve de concept violon

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