Googleマップで自動的に位置が設定されます：#map divの相対座標

Question

私は奇妙な問題を抱えています。 #map divのスタイルを設定して、位置を固定すると（背景として必要なので）、相対位置に自動的に位置が設定され、設定が上書きされます。私はこの動作をどこから変更するのか把握できませんでした。

親クラス：今すぐ

<div class="wrapper"> 
     <div id="map"></div> 
     <div class="entries container"> 
      {% with 940 as width %}{% placeholder content %}{% endwith %} 
      </p> 
     </div> 
    </div> 

私はページを入力すると、それは最初うまく以降レンダリング：

.wrapper { 
    margin: 0; 
    padding: 0; 
    height: 100vh; 
    z-index: 1; 
    display: flex; 
} 

と#map

#map { 
     height: 100%; 
     width: 100vw; 
     overflow: hidden; 
     z-index: 0; 
     top: 0; 
     left: 0; 
     position: fixed; 

コードは単純です。 milisec jsの適用#map divにこれらの行が追加されていると仮定します

element.style { 
    position: relative; 
    overflow: hidden; 
} 

もし私がそれを手動で変更すれば、正確に何をしたいのですが、この無効化を無効にすることはできません。誰かがこれのような何かをexpieriencedしましたか？私はちょっと固まった。

Im usign Chrome。

お時間をいただきありがとうございます。 よろしく

JSファイル：！position:fixed財産に重要に追加する

var map; 
function initialize() { 
    var v = {lat: 4.00, lng: 7.00}; 

    var marker = new google.maps.Marker({ 
     position: v, 
     map: map, 
     title: 'V!' 
    }); 

    var styleArray = [ 
     { 
      "featureType": "all", 
      "elementType": "all", 
      "stylers": [ 
       { 
        "hue": "#ff0000" 
       }, 
       { 
        "saturation": -100 
       }, 
       { 
        "lightness": -30 
       } 
      ] 
     }, 
     { 
      "featureType": "all", 
      "elementType": "labels.text.fill", 
      "stylers": [ 
       { 
        "color": "#ffffff" 
       } 
      ] 
     }, 
     { 
      "featureType": "all", 
      "elementType": "labels.text.stroke", 
      "stylers": [ 
       { 
        "color": "#353535" 
       } 
      ] 
     }, 
     { 
      "featureType": "landscape", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#656565" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi", 
      "elementType": "geometry.fill", 
      "stylers": [ 
       { 
        "color": "#505050" 
       } 
      ] 
     }, 
     { 
      "featureType": "poi", 
      "elementType": "geometry.stroke", 
      "stylers": [ 
       { 
        "color": "#808080" 
       } 
      ] 
     }, 
     { 
      "featureType": "road", 
      "elementType": "geometry", 
      "stylers": [ 
       { 
        "color": "#454545" 
       } 
      ] 
     } 
    ]; 
    var mapOptions = { 
     center: new google.maps.LatLng(47.295065, 7.937821), 
     zoom: 14, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL, 
     }, 
     disableDoubleClickZoom: false, 
     mapTypeControl: false, 
     scaleControl: false, 
     scrollwheel: false, 
     panControl: false, 
     streetViewControl: false, 
     draggable: false, 
     overviewMapControl: false, 
     overviewMapControlOptions: { 
      opened: false, 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: styleArray 
    }; 
    map = new google.maps.Map(document.getElementById("map"), 
     mapOptions); 

    var locations = [ 
     ['V', 'undefined', 'undefined', 'undefined', 'undefined', 4.0, 7.0, 'https://mapbuildr.com/assets/img/markers/hollow-pin-red.png'] 
    ]; 
    for (i = 0; i < locations.length; i++) { 
     if (locations[i][1] == 'undefined') { 
      description = ''; 
     } else { 
      description = locations[i][1]; 
     } 
     if (locations[i][2] == 'undefined') { 
      telephone = ''; 
     } else { 
      telephone = locations[i][2]; 
     } 
     if (locations[i][3] == 'undefined') { 
      email = ''; 
     } else { 
      email = locations[i][3]; 
     } 
     if (locations[i][4] == 'undefined') { 
      web = ''; 
     } else { 
      web = locations[i][4]; 
     } 
     if (locations[i][7] == 'undefined') { 
      markericon = ''; 
     } else { 
      markericon = locations[i][7]; 
     } 
     marker = new google.maps.Marker({ 
      icon: markericon, 
      position: new google.maps.LatLng(locations[i][5], locations[i][6]), 
      map: map, 
      title: locations[i][0], 
      desc: description, 
      tel: telephone, 
      email: email, 
      web: web 
     }); 
     link = ''; 
    } 

    map.panBy(0, 200); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 

}); 

Answer 1

してみてください。それが動作しない場合は、JSの下部に固定する位置を設定するためにjqueryのを追加map.setCenter(center);

$("#map").css("position","fixed !important"); 

・ホープ、このことができた後も右map.panBy(0,200)後のファイルと。