Question

我的地图怎么了？请转到 gtob.openfile.ch/mitglieder，单击“ A-Z”，然后单击“ Screenbox Multimedia Ltd.”。最后单击“显示地图”按钮，然后同一地图显示为三个div。在中层div中，地图失真了，我无法找出原因...（响应式设计尚未完成，请以至少1200像素的屏幕宽度显示）

好的，这是用于构建地图的JavaScript / jquery：

var memberGoogleMapsData             = new Object;
memberGoogleMapsData.mapContainer    = $(this).closest('div').find('div.memberMap');
$(this).closest('div').find('button').on('click', function() {
    memberGoogleMapsData.mapsPosLat     = parseFloat(memberGoogleMapsData.mapContainer.data('mapsposlat'));
    memberGoogleMapsData.mapsPosLng     = parseFloat(memberGoogleMapsData.mapContainer.data('mapsposlong'));
    memberGoogleMapsData.mapsZoom         = parseInt(memberGoogleMapsData.mapContainer.data('mapszoom'));
    memberGoogleMapsData.markerPosLat     = parseFloat(memberGoogleMapsData.mapContainer.data('markerposlat'));
    memberGoogleMapsData.markerPosLng    = parseFloat(memberGoogleMapsData.mapContainer.data('markerposlng'));
    memberGoogleMapsData.mapId            = memberGoogleMapsData.mapContainer.prop('id');

    memberGoogleMapsData.mapPos = new google.maps.LatLng(memberGoogleMapsData.mapsPosLat, memberGoogleMapsData.mapsPosLng);
    memberGoogleMapsData.options = {
            zoom:       memberGoogleMapsData.mapsZoom,
            center:     memberGoogleMapsData.mapPos,
            mapTypeId:  google.maps.MapTypeId.HYBRID,
            tilt:       0,
            heading:    0
    };

    memberGoogleMapsData.myMap = new google.maps.Map(document.getElementById(memberGoogleMapsData.mapId),memberGoogleMapsData.options);
    memberGoogleMapsData.myMap2 = new google.maps.Map(document.getElementById('testMap'),memberGoogleMapsData.options);
    memberGoogleMapsData.myMap3 = new google.maps.Map(document.getElementById('testMap2'),memberGoogleMapsData.options);
});

在div.memberMap中，我具有用于提供构建Google地图所需数据的数据标签：

<div class="memberMap" id="memberMap207" data-mapsposlat="47.50467769999999" data-mapsposlong="9.39942510000003" data-mapszoom="13" data-markerposlat="47.50467769999999" data-markerposlng="9.39942510000003">

Answer 1

customer.css文件中的样式如下

#members div.members img {
    float: right;
    max-width: 300px;
    max-height: 150px;
}

您的第一个地图位于div.members内部，因此此样式也会破坏该地图的所有图块图像。

div.members外的第二个地图不受此样式的影响。

希望对您有帮助！

Google Maps的显示失真

1 个答案: