0

私はNgMapを使用し、いくつかのマーカーを持っています。マウスがマーカーの上にあるとき、私はinfoWindowとして「カスタムマーカー」を提示します。問題は、カスタムマーカーが表示されたときにマーカーがある場合でも、そのマーカーがクリック可能であることです。カスタムマーカーのフロートをマップ上に作成する方法、またはカスタムマーカーの下で地図をクリックできないようにする方法はありますか?カスタムマーカーでGoogleマップをクリックできないようにするにはどうすればよいですか?

<ng-map center="current-location" 
    id="map" 
    zoom-control="true" 
    zoom-control-options="{style:'LARGE', position:'RIGHT_BOTTOM'}" 
    scale-control="true" 
    street-view-control="false" 
    map-type-control="true" 
    map-type-control-options="{style:'HORIZONTAL_BAR', position:'LEFT_BOTTOM'}" 
    style="height:100%;width:100%;position: absolute" 
> 
<marker 
     ng-repeat="scene in vm.scenes" 
     position="{{scene.location}}" 
     id="marker{{$index}}" 
     draggable="{{scene.draggable}}" 
     on-dragend="vm.getNewLocation()" 
     icon="{{scene.markerPath}}" 
     on-mouseover="vm.showWindow(event, scene)" 
     opacity="{{scene.opacity}}" 
     on-click="vm.selectScene(event, scene)" 
     on-mouseout="vm.hideWindow(event)" 
> 
</marker> 

<custom-marker 
     visible="{{vm.options.showInfo === true}}" 
     id="customMarker" 
     position="{{vm.infoScene.location}}" 
> 

    <md-card md-theme="text-theme" flex style="opacity: 0.9;" 
      ng-mouseleave="vm.hideWindowCustom()" 
      ng-mouseover="vm.keepWindow()" 
    > 
     <md-card-content flex> 

      <img ng-src="{{vm.infoScene.photo_url}}" width="200" height="200"> 

      <md-input-container class="md-block"> 

      <textarea ng-change="vm.options.hasChanges = true" ng-model="vm.infoScene.short_description" 
         md-maxlength="70" 
         md-select-on-focus></textarea> 
      </md-input-container> 
     </md-card-content> 
    </md-card> 
</custom-marker> 
</ng-map> 
+1

マーカークリック後のイベントの伝播を停止してください: 'event.stopPropagation'を' selectScene'関数に追加してください。いくつかのブラウザでは、関数は伝播を止めるために 'false'を返さなければなりません。 –

答えて

関連する問題