【问题标题】:How to make Google Maps not clickable under custom marker?如何使谷歌地图在自定义标记下不可点击?
【发布时间】: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


【解决方案1】:

您可以尝试在 css 中使用指针事件吗? https://davidwalsh.name/pointer-events

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-01-22
    • 1970-01-01
    • 1970-01-01
    • 2015-12-04
    • 2019-12-01
    • 2012-09-27
    • 2013-08-21
    相关资源
    最近更新 更多