Нажатие внутри многоугольника в Google Maps - PullRequest
Новая
       17

Нажатие внутри многоугольника в Google Maps

4 голосов
/ 19 мая 2010

Включенный фрагмент JavaScript должен выполнять следующие действия:

  1. Когда пользователь нажимает на карту, инициализируйте headMarker и нарисуйте круг (многоугольник) вокруг него

  2. Когда пользователь щелкает внутри круга, инициализируем tailMarker и рисуем путь между этими двумя маркерами

1 происходит как ожидалось. Но когда пользователь нажимает внутри круга, в function(overlay,point) значение overlay не равно нулю, а значение point равно нулю. Из-за этого код не может инициализировать tailMarker.

Может кто-нибудь сказать мне выход. 

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:" + headMarker.getPoint().lat()+ ", " + 
                        headMarker.getPoint().lng()+ " " +
                       "to:" + tailMarker.getPoint().lat() + "," +
                        tailMarker.getPoint().lng(), 
                       {getPolyline:true}); 
    }
});

1 Ответ

1 голос
/ 19 мая 2010

Все, что вам нужно сделать, это установить параметр clickable: false в конструкторе GPolygon вашего круга. Ниже приведен пример, который я использовал для ответа на другой аналогичный вопрос о переполнении стека : 

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

Скриншот приведенного выше примера:

Google Maps Clicking Inside a Polygon

Я использовал бриллианты вместо кругов, потому что их легче рисовать в v2 API. Обратите внимание, что параметр latlng прослушивателя click был бы нулевым, если бы полигоны не были созданы с опцией clickable: false.

...