科尔多瓦/ Ionic2原生地图：触摸地图上的div ontop“bleeds through”

我有一个div作为菜单超过了我的地图。当我触摸地图时，它会“流血”，就像我触摸地图本身一样。我似乎无法找到一个地图属性来解决这个问题。我也无法与顶尖的div进行互动。这就像地图的位置在zIndex: 0处可见，但它占据了所有可能的索引。科尔多瓦/ Ionic2原生地图：触摸地图上的div ontop“bleeds through”

这里是我的代码：

TS/JS

this.map = new GoogleMap('map', { 
     'backgroundColor': 'white', 
     'controls': { 
     'compass': false, 
     'myLocationButton': false, 
     'indoorPicker': false, 
     'zoom': false 
     }, 
     'gestures': { 
     'scroll': true, 
     'tilt': true, 
     'rotate': true, 
     'zoom': true 
     }, 
     'camera': { 
     'latLng': location, 
     'tilt': 30, 
     'zoom': 15, 
     'bearing': 50 
     } 
    });

HTML

<div id="test"></div> 
<div id="map"></div>

CSS

#test 
{ 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    height: 50%; 
    width: 50%; 
    background: red; 
} 
#map 
{ 
    height: 100%; 
}

来源

2017-02-27 Sam McC

你应该设置你的地图无法点击，当你有一个元素在它上面（ source）：

//Before showing your overlaying div: 
map.setClickable(false);

来源

2017-02-27 21:20:14 Schlaus

如果我想让div永远在屏幕上怎么办？它只是部分覆盖屏幕 –

这是记录了一些in the Cordova plugin documentation。

为了让您的div可点击，请将其放置在地图元素中。该插件将观看div并确保它可点击。

但我注意到的一件事是，如果您动态显示或隐藏div，插件并不总是选中它，并且点击直接进入地图。我已经能够解决此问题：

this.map.refreshLayout();

每当我显示/隐藏覆盖div。 Documentation for refreshLayout。

或者，您可以按照Schlaus的建议进行操作，并拨打map.setClickable(false)，但由于您仍然希望地图可点击，因此您的情况似乎不会起作用。

来源

2017-05-17 22:29:14

科尔多瓦/ Ionic2原生地图：触摸地图上的div ontop“bleeds through”

回答

相关问题