【发布时间】:2017-09-04 12:40:48
【问题描述】:
我使用 NgMap 并有一些标记。当鼠标悬停在标记上时,我将“自定义标记”作为信息窗口呈现。问题是当自定义标记出现时,如果它下面有一个标记,它仍然是可点击的。如何使自定义标记漂浮在地图上或使自定义标记下的地图不可点击?
<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>
【问题讨论】:
-
尝试在标记点击后停止传播事件:将
event.stopPropagation添加到selectScene函数。在某些浏览器上,该函数还需要返回false才能停止传播。
标签: html google-maps google-maps-api-3 google-maps-markers ng-map