Google Maps: ottenere clic o marcatore (x, y) coordinate di pixel all'interno marcatore click ascoltatore

Question

Sto cercando di visualizzare completamente finestra info personalizzati oltre gli indicatori di mappa sul marcatore click. Ho implementato con successo this answer per ottenere un div da mostrare su un clic di mappa su tela ... ma non sono in grado di replicarlo su un clic del marcatore.

È possibile ottenere la posizione dei pixel dei marker all'interno della funzione di clic del marker e sopprimere la finestra di apertura normale per visualizzare l'infiindow personalizzato desiderato?

ho provato questo:

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

ma nella console, vedo:

Uncaught TypeError: Cannot read property 'x' of undefined 

Answer 1

Un marker click event restituisce un MouseClickEvent

La proprietà unica documentato di un MouseClickEvent è:

LatLng LatLng La latitudine/longitudine che era sotto il cursore quando si è verificato l'evento.

convertire in una posizione di pixel utilizzare il metodo di fromLatLngToContainerPixel 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'; 
    }); 

working fiddle

frammento di codice:

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div> 
 
<div id="myinfo" class="info"> 
 
    <p>I am a div on top of a google map ..</p> 
 
</div>

Answer 2

Con l'aiuto di Radio ero in grado di risolvere questo problema. Votalo.

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div> 

    <script> 

    info = document.getElementById('myinfo'); 

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

    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); 
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); 
    var scale = Math.pow(2, map.getZoom()); 
    var worldPoint = map.getProjection().fromLatLngToPoint(this.getPosition()); 
    var markerCoords = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); 

    var x=markerCoords['x']+$('#map').offset().left; //offset needed if map not fullscreen 
    var y=markerCoords['y']; 

    info.style.left=x+'px'; 
    info.style.top=y+'px'; 
    info.style.display='block'; 

    }); 

    </script> 

Answer 3

Un'altra opzione. Utilizzare lo InfoBox third party library. Esso eredita da OverlayView e puoi inserire il tuo div "completamente personalizzato" in esso.

proof of concept fiddle

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('<div id="myinfo" class="info"><p>I am a div on top of a google map ..</p></div>'); 
 
    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; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Answer 4

Ecco come si ottiene la posizione di 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 <div> 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; 
    }