javascript - 由于 div 样式，谷歌地图在弹出窗口中不可见

Question

我有以下功能可以根据坐标在 Google map 中显示位置。单击按钮时调用以下函数:

function onClickLocate(args) {
    var gridInstance = $(args.target.closest(".e-grid")).ejGrid("instance");
    //get index of the row getIndexByRow() 
    var inx = gridInstance.getIndexByRow(args.target.closest("tr"));
    //CurrentViewData using Index 
    var data = gridInstance.getCurrentViewData()[inx]; 
    openMapDialog(data.Latitude, data.Longitude);
}

openMapDialog 打开一个 syncfusion 弹出窗口"

function openMapDialog(lat, lng) {
    $("body").append("<div id='branchMap'></div>");
    var divMAp = document.createElement('div');
    divMAp.id = "googleMap";
    $("#branchMap").append(divMAp);
    $('#googleMap').css("position", "initial");
    $("[data-upgraded]").removeAttr("data-upgraded");
    $("#branchMap").ejDialog({
        width: 800,
        height: 500,
        minWidth: 310,
        minHeight: 215,
        enableModal: true,
        showOnInit: true,
        title: "Warehouse Location",
        open: "createMap",
        cssClass: "custom-dialog",
        isResponsive: true,
        target: "body"
    });
};

createMap 是在 StackOverflow 上找到的用于显示 map 的函数:

function createMap(args) {
    document.getElementById('googleMap').style.display = "block";
    var lat =$("#branchMap").data("lat");
    var lng =$("#branchMap").data("lng");
    var map;
    var marker;
    var myLatlng = new google.maps.LatLng(lat, lng);
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();

    var mapOptions = {
        zoom: 18,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);

    marker = new google.maps.Marker({
        map: map,
        position: myLatlng,
        draggable: false
    });

    geocoder.geocode({
        'latLng': myLatlng
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                $('#address').val(results[0].formatted_address);
                $('#latitude').val(marker.getPosition().lat());
                $('#longitude').val(marker.getPosition().lng());
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            }
        }
    });


    google.maps.event.addListener(marker, 'dragend', function () {

        geocoder.geocode({
            'latLng': marker.getPosition()
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $('#address').val(results[0].formatted_address);
                    $('#latitude').val(marker.getPosition().lat());
                    $('#longitude').val(marker.getPosition().lng());
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                }
            }
        });
    });
}

问题是 map 在 chtml 中呈现，弹出窗口中的位置正确，但由于 googleMap div 的样式，它不可见，位置设置为绝对正如您在 openMapDialog 中看到的那样，我试图将其设置为 initial 但我不能。我知道初始位置会起作用，因为我首先在 Chrome DevTools 中尝试过。

知道如何为 googleMap div 设置正确的样式吗？

谢谢

Answer 1

尝试将 googleMap div 的高度设置为 100% 或硬编码的像素数量。我之前遇到过这个问题，那是因为 div 没有高度所以它看起来不可见。