Clicking inside a polygon in Google Maps_问答_开发者

Clicking inside a polygon in Google Maps

开发者 https://www.devze.com 2022-12-31 12:48 出处：网络

The included JavaScript snippet is supposed to do the following: As the user clicks on the map, initialize headMarker and draw a circle (polygon) around it

The included JavaScript snippet is supposed to do the following:

As the user clicks on the map, initialize headMarker and draw a circle (polygon) around it
As the user clicks inside the circle, initialize tailMarker and draw the path between these two markers

1 is happening as expected. But as the user clicks inside the circle, in the function(overlay,point), overlay is non-null while point is null. Because of this, the code fails to initialize tailMarker.

Can someone tell me a way out.

GEvent.addListener(map, "click", function(overlay,point) {
    if (isCreateHeadPoint) {
        // add the head marker
        headMarker = new GMarker(point,{icon:redIcon,title:'0'});
        map.addOverlay(headMarker);
        isCreateHeadPoint = false;
        // draw the circle
        drawMapCircle(point.lat(),point.lng(),1,'#cc0000',2,0.8,'#0',0.1);
    } else {
        // add the tail marker
        tailMarker = new GMarker(point,{icon:greenIcon,title:''});
        map.addOverlay(tailMarker);
        isCreateHeadPoint = true;
        // load thes path from head to tail
        direction.load("from:" + he开发者_StackOverflow社区adMarker.getPoint().lat()+ ", " + 
                        headMarker.getPoint().lng()+ " " +
                       "to:" + tailMarker.getPoint().lat() + "," +
                        tailMarker.getPoint().lng(), 
                       {getPolyline:true}); 
    }
});

All you need to do is to set the clickable: false option in the GPolygon constructor of your circle. The following is an example that I used to answer another similar question on Stack Overflow:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Clicking Inside a Polygon</title> 
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
              type="text/javascript"></script>
</head> 
<body onunload="GUnload()">
   <div id="map" style="width: 450px; height: 300px"></div> 

   <script type="text/javascript"> 
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(37.4419, -122.1419), 13);

      GEvent.addListener(map, "click", function(overlay, latlng) {
         var lat = latlng.lat();
         var lon = latlng.lng();
         var latOffset = 0.01;
         var lonOffset = 0.01;
         var polygon = new GPolygon([
            new GLatLng(lat, lon - lonOffset),
            new GLatLng(lat + latOffset, lon),
            new GLatLng(lat, lon + lonOffset),
            new GLatLng(lat - latOffset, lon),
            new GLatLng(lat, lon - lonOffset)
         ], "#f33f00", 5, 1, "#ff0000", 0.2, { clickable: false });

         map.addOverlay(polygon);
      });
   </script> 
</body> 
</html>

Screenshot of the above example:

Clicking inside a polygon in Google Maps

I used diamonds instead of circles, because they are easier to draw in the v2 API. Note that the latlng parameter of the click listener would have been null if the polygons were not created with the clickable: false option.