Google Maps api v3 - круг без заливки или без возможности заполнения - PullRequest
Новая
       17

Google Maps api v3 - круг без заливки или без возможности заполнения

1 голос
/ 22 января 2012

.. и извините за мой английский.

Я пытаюсь создать круг без заливки с помощью Google Maps API v3.Я знаю, что могу установить непрозрачность (и заливка отключена), но эта невидимая заливка все еще активна.Мне нужно установить заливку не кликабельной, но удар должен быть кликабельным.Под моим кругом есть несколько точек и линий, которые должны быть кликабельными, и круг выше, чем, например, линии.Моя идея состояла в том, чтобы переместить круг на другую панель, но я не нашел пути, как это сделать.Есть ли решение для этого?

Спасибо!Ajax

[EDIT]

Вот пример кода.Моя проблема в том, что я не могу нажать на карту или линию внутри синего круга. 

  <!DOCTYPE html>
  <html>
  <head>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR_GMAP+API_KEY&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var lat = 49;
        var lon = 15;

        var myOptions = {
          center: new google.maps.LatLng(lat,lon),
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        google.maps.event.addListener(map, "click", function(clickEvt) {
            alert('mapClicked');
        });

        var line = new google.maps.Polyline({
            path: [new google.maps.LatLng(lat + 0.001, lon + 0.001),new google.maps.LatLng(lat - 0.001, lon - 0.001)],
            strokeColor: '#00FF00',
            map: map
        });

        google.maps.event.addListener(line, "click", function() {
            alert('Line clicked'); 
        });

        var circle = new google.maps.Circle({
            strokeColor: '#0000FF',
            strokeWeight: 2,
            fillOpacity: 0,
            map: map,
            center: new google.maps.LatLng(lat, lon),
            radius: 100
        });


        google.maps.event.addListener(circle, 'click', function(event) {       
            alert('circle clicked');
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 04 октября 2018

set 'clickable: false` в объекте опции круга, чтобы позволить обнаружение события щелчка в слое карты. 

var circle = new google.maps.Circle({
    strokeColor: '#0000FF',
    strokeWeight: 2,
    fillOpacity: 0,
    map: map,
    center: new google.maps.LatLng(lat, lon),
    radius: 100,
    clickable: false
});

ссылка: Незаполняемая заливка в круге?

0 голосов
/ 24 января 2012

Попробуйте: нарисуйте 2 круга, один для вашего контура (кликабельный) и один для заливки (не кликабельный).Круг заливки должен быть немного меньше, и установите его z-индекс поверх другого, чтобы вы не нажимали на что-либо, кроме круга контура.Проблема будет заключаться в том, что под кружком можно нажимать другие предметы.

...