Question

两个通知都是相同的文本，都不能滚动到视线之外，但是左侧的通知固定在画布中，而右侧的通知则是浮动在地图顶部的DOM元素。

为什么都这样？而我该如何关闭呢？肯定一个通知就足够了吗？

为什么他们有1个而我有2个？

示例代码，请注意重复的版权...

#wrapper {
  height: 180px;
  width: 100%;
  border: dotted 1px green;
}

<div id=wrapper></div>
<script>
  function initMap() {
    const wrapper = document.getElementById('wrapper');
    const shadow = wrapper.attachShadow({
      mode: 'open'
    });

    const mapDiv = document.createElement('div');
    mapDiv.style.height = '180px';
    mapDiv.style.border = 'dotted 1px red';
    shadow.append(mapDiv);


    const options = {
      center: {
        lat: 51.51,
        lng: -0.08
      },
      zoom: 14,
      keyboardShortcuts: false,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      }]
    };

    const map = new google.maps.Map(mapDiv, options);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Answer 1

看一下示例的DOM，我可以看到重复的项目分别具有css类gmnoprint和gmnoscreen。这些类名称建议当您在屏幕上看到地图时，一个应该可见，而当您打印地图时，另一个应该可见。

深入研究https://maps.googleapis.com/maps-api-v3/api/js/33/4/intl/en_gb/controls.js中的Google代码，我发现Maps JavaScript API使用以下CSS样式来处理这种情况

@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}

在影子DOM树中创建地图时，可以解决将这些样式添加到影子根目录的问题。

我修改了您的示例并将样式添加到阴影根。看一下代码片段：

#wrapper {
  height: 180px;
  width: 100%;
  border: dotted 1px green;
}

<div id=wrapper></div>
<script>
  function initMap() {
    const wrapper = document.getElementById('wrapper');
    const shadow = wrapper.attachShadow({
      mode: 'open'
    });
    
    shadow.innerHTML = `<style>@media print {  .gm-style .gmnoprint, .gmnoprint {    display:none  }}@media screen {  .gm-style .gmnoscreen, .gmnoscreen {    display:none  }}</style>`;

    const mapDiv = document.createElement('div');
    mapDiv.style.height = '180px';
    mapDiv.style.border = 'dotted 1px red';
    shadow.append(mapDiv);


    const options = {
      center: {
        lat: 51.51,
        lng: -0.08
      },
      zoom: 14,
      keyboardShortcuts: false,
      streetViewControl: false,
      mapTypeControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: 'poi',
        elementType: 'labels',
        stylers: [{
          visibility: 'off'
        }]
      }]
    };

    const map = new google.maps.Map(mapDiv, options);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>

我希望这会有所帮助！

如何删除Google地图上的两个版权声明之一？

1 个答案: