Capture Coordinates in Google Map on User Click

匿名 (未验证) 提交于 2019-12-03 01:10:02

问题:

I'm using this code to capture the co-ordinates when user clicks on the map by using below event listener:

google.maps.event.addListener(map, 'click', function(event) {     placeMarker(event.latLng); }); 

However this function doesn't get called when user click on already marked location in Map. Meaning this function is not called for points where mouse pointer changes to hand icon on Google Map.

Need help on capturing these kind of locations.

回答1:

You should add the click listener on marker will give you the position of marker.

//Add listener google.maps.event.addListener(marker, "click", function (event) {     var latitude = event.latLng.lat();     var longitude = event.latLng.lng();     console.log( latitude + ', ' + longitude ); }); //end addListener 

Edit: You need something like this

//Add listener google.maps.event.addListener(marker, "click", function (event) {     var latitude = event.latLng.lat();     var longitude = event.latLng.lng();     console.log( latitude + ', ' + longitude );      radius = new google.maps.Circle({map: map,         radius: 100,         center: event.latLng,         fillColor: '#777',         fillOpacity: 0.1,         strokeColor: '#AA0000',         strokeOpacity: 0.8,         strokeWeight: 2,         draggable: true,    // Dragable         editable: true      // Resizable     });      // Center of map     map.panTo(new google.maps.LatLng(latitude,longitude));  }); //end addListener 


回答2:

Another solution is to place a polygon over the map, same size as the map rectangle, and collect this rectangles clicks.

function initialize() {   var mapDiv = document.getElementById('map-canvas');   var map = new google.maps.Map(mapDiv, {     center: new google.maps.LatLng(37.4419, -122.1419),     zoom: 13,     mapTypeId: google.maps.MapTypeId.ROADMAP   });    google.maps.event.addListener(map, 'bounds_changed', function() {       var lat1 = 37.41463623043073;       var lat2 = 37.46915383933881;       var lng1 = -122.1848153442383;       var lng2 = -122.09898465576174;          var rectangle = new google.maps.Polygon({          paths : [            new google.maps.LatLng(lat1, lng1),            new google.maps.LatLng(lat2, lng1),            new google.maps.LatLng(lat2, lng2),            new google.maps.LatLng(lat1, lng2)          ],         strokeOpacity: 0,         fillOpacity : 0,         map : map       });       google.maps.event.addListener(rectangle, 'click', function(args) {            console.log('latlng', args.latLng);     });   }); } 

Now you get LatLng's for places of interest (and their likes) also.

demo -> http://jsfiddle.net/qmhku4dh/



回答3:

You're talking about the Point of Interest icons that Google puts on the map.

Would it work for you to remove these icons entirely? You can do that with a Styled Map. To see what this would look like, open the Styled Map Wizard and navigate the map to the area you're interested in.

Click Point of interest under Feature type, and then click Labels under Element type. Finally, click Visibility under Stylers and click the Off radio button under that.

This should remove all of the point of interest icons without affecting the rest of the map styling. With those gone, clicks there will respond to your normal map click event listener.

The Map Style box on the right should show:

Feature type: poi
Element type: labels
Visibility: off

If the result looks like what you want, then click Show JSON at the bottom of the Map Style box. The resulting JSON should like this this:

[   {     "featureType": "poi",     "elementType": "labels",     "stylers": [       { "visibility": "off" }     ]   } ] 

You can use that JSON (really a JavaScript object literal) using code similar to the examples in the Styled Maps developer's guide. Also see the MapTypeStyle reference for a complete list of map styles.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!