如何使 Google 地图在自定义标记下不可点击?
How to make Google Maps not clickable under custom marker?
我使用 NgMap 并有一些标记。当鼠标悬停在标记上时,我会显示一个 "custom-marker" 作为信息窗口。问题是当自定义标记出现时,如果它下面有一个标记,它仍然是可点击的。如何使自定义标记浮动在地图上或使自定义标记下的地图不可点击?
<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>
您可以尝试在 css 中使用指针事件吗? https://davidwalsh.name/pointer-events
我使用 NgMap 并有一些标记。当鼠标悬停在标记上时,我会显示一个 "custom-marker" 作为信息窗口。问题是当自定义标记出现时,如果它下面有一个标记,它仍然是可点击的。如何使自定义标记浮动在地图上或使自定义标记下的地图不可点击?
<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>
您可以尝试在 css 中使用指针事件吗? https://davidwalsh.name/pointer-events