I'm using Google Maps API with Javascript
I currently have the following code in my initMap
function:
google.maps.event.addListener(map, 'mousemove', function (event) {
currentPos = event.latLng;
console.log(currentPos.lat() + " ... " + currentPos.lng());
});
When I right-click on areas of the map, certain methods are called in that specific area.
But when I hover over the marker (which is a circle), the currentPos
remains the same as it was just before the mouse went over the circle.
ie - the currentPos
is somewhere on the border of the circle, yet my mouse is hovering inside the circle.
Is there anyway to either
mousemove
listener, even when hovering over a marker, orThis might make things easier for me.
Thanks for the help!
Trigger the mousemove
-event for the map
in the mousemove
of the circle
:
function initialize() { var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 14, center: new google.maps.LatLng(52.5498783, 13.425209099999961) }), ctrl = document.createElement('code'); map.controls[google.maps.ControlPosition.TOP_CENTER].push(ctrl); var circle = new google.maps.Circle({ map: map, center: map.getCenter(), radius: 100, draggable: true }); google.maps.event.addListener(map, 'mousemove', function(e) { ctrl.innerHTML = e.latLng.toUrlValue(); }); google.maps.event.addListener(circle, 'mousemove', function(e) { google.maps.event.trigger(this.getMap(), 'mousemove', { latLng: e.latLng }) }); } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map_canvas { height: 100%; margin: 0; padding: 0 } code { background: #fff; padding: 2px; font-size: 1.5em; border: 1px solid #000; border-radius: 5px; }
<div id="map_canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.