2016-09-15 1 views
0

Я работаю с Google Maps API-v3. Я добавляю полигон на свою карту и кучу полилиний. Эти линии обычно расположены в области полигонов. Это выглядит так: Map with polygon and polylinesGoogle Maps Polygone «clickable: false» не показывает никакого эффекта

я отключил клик-событие на полигоне:

let mapPolygone = { 
      id: currentPolygone.Id, //currentPolygone is just a wrapper 
      path: path, 
      stroke: { 
       color: currentPolygone.LineColor, 
       weight: currentPolygone.LineWeight 
      }, 
      fill: { 
       color: currentPolygone.FillColor, 
       opacity: currentPolygone.Opacity 
      }, 
      editable: false, 
      draggable: false, 
      geodesic: false, 
      // I disabled the click 
      clickable: false, 
      visible: true, 
      } 

Я зарегистрировал щелчок-обработчик на polyine:

let mapPolyline = { 
    // currentPolyline is also a wrapper 
    id: currentPolyline.Id, 
    path: path, 
    stroke: { 
     color: currentPolyline.LineColor, 
     weight: currentPolyline.LineWeight 
    }, 
    strokeOpacity: 1, 
    editable: false, 
    draggable: false, 
    geodesic: false, 
    clickable: true, 
    visible: true, 
    icons: this.getIcons(currentPolyline), // generates a standard GMap-Arrow 
    events: { 
     //Here goes the click event. Doing stuff on 
     click: (polyline: any) => { 
     this.$scope.polyLineClicked(currentPolyline.Id); 
     } 
    } 
    } 

Что я ожидаю от Google , а с другого thread - это то, что полигон игнорирует щелчок и что элемент находится под полилинией, получает щелчок. Однако это не так. Я все еще получаю щелчок курсор при нахождении над полигоном

enter image description hereenter image description here

и он все еще получает щелчок.

Порядок нанесения полилиний/полигонов происходит в случайном порядке. Иногда линия кликабельна (при окраске над полигоном), но обычно это не так.

Есть ли способ получить эту работу, не придумывая пользовательские оверлеи и тому подобное? Я что-то упустил?

Спасибо вам заранее!

+3

Если вы не нарисовали никаких полилиний, полигон не может быть нажат? Можем ли мы увидеть полный пример, демонстрирующий, как вы создаете многоугольник и полилинии? – duncan

+0

Невозможно изменить порядок наложений (я думаю, что это было бы самым эффективным и легким решением, о котором я могу думать)? Рассматривая другой поток, вы можете хранить все данные в 2 массивах (один содержит полилинии, один из которых содержит полигоны); то в последний момент вы устанавливаете полигоны на карте, затем полилинии –

+0

@EmmanuelDelay: Я думаю, это невозможно, так как на картах Google используется система фиксированного слоя, в которой полилинии и полигоны втягиваются в один и тот же слой (см. http: : //stackoverflow.com/a/15674284/2221750) – hoffmax91

ответ

0

Хорошо, подготовка MWE, рекомендованная @duncan, сделала трюк. Я использую пакет angular-google-map, который предоставляет угловую оболочку для API Карт Google.

полилинии и многоугольники в настоящее время переданы директивы:

<ui-gmap-google-map center='map.center' 
        zoom='map.zoom' 
        options="map.options" 
        aria-label="Google map"      
        control="map.control" 
        events="map.events" 
        refresh="refresh"> 
    <!-- Polylines--> 
    <ui-gmap-polyline ng-repeat="p in mapPolylines" 
         path="p.path" 
         stroke="p.stroke" 
         visible="p.visible" 
         geodesic="p.geodesic" 
         fit="true" 
         editable="p.editable" 
         icons="p.icons" 
         draggable="p.draggable" 
         events="p.events"> 
    </ui-gmap-polyline> 

    <!-- Polygones --> 
    <ui-gmap-polygon ng-repeat="p in mapPolygones" 
        path="p.path" 
        stroke="p.stroke" 
        fill="p.fill" 
        visible="p.visible" 
        geodesic="p.geodesic" 
        fit="true" 
        editable="p.editable" 
        draggable="p.draggable" 
        events="p.events"> 
    </ui-gmap-polygon> 
</ui-gmap-google-map> 

я пропустил добавление «интерактивный» атрибута в UI-GMap-многоугольнике тега. При добавлении этой привязки к тегу все работало как шарм:

clickable="p.clickable" 

Спасибо, ребята, в любом случае.

0

Для упорядочения штабелей poly * вы также можете использовать the zIndex property, который определяет «ZIndex по сравнению с другими полисами». Пакет угловых-google-карт также предоставляет возможность установить the zIndex attribute.

Смежные вопросы