javascript - 由于 div 样式,Google 地图在弹出窗口中不可见
问题描述
我有以下功能可以根据坐标在谷歌地图中显示一个位置。单击按钮时会调用以下函数:
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 打开一个同步融合弹出窗口”
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 上的一个函数,用于显示地图:
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);
}
}
});
});
}
问题是地图在弹出窗口中以正确的位置呈现在 chtml 中,但由于 googleMap div 的样式,它不可见,位置设置为绝对正如您在 openMapDialog 中看到的那样,我试过了将其设置为初始值,但我不能。我知道最初的位置会起作用,因为我首先在 Chrome DevTools 中尝试过。
知道如何为 googleMap div 设置正确的样式吗?
谢谢
解决方案
尝试将 googleMap div 的高度设置为 100% 或硬编码的像素量。我之前遇到过这个问题,这是因为 div 没有高度,所以它看起来不可见。
推荐阅读
- type-inference - 证明任意嵌套的 Vect 别名是可显示的
- c# - 将默认光标更改为自定义光标
- laravel - 将多个相同的名称转换为一个名称,并且值在 laravel 中得到总和
- azure - 如何从 DevOps api 获取团队头像
- openlayers - 开放层。矢量瓷砖,边缘的样式特征
- dragonruby-game-toolkit - 如何在 DragonRuby Game Toolkit 中的“sprite”上渲染“solid”?
- go - 如何更正“if”构造中的类型比较
- vim - Vim 视觉模式在 cygwin 中表现异常
- python - Passing a scrapy HtmlResponse object to an external function
- asp.net - 没有“继承”属性就不能使用“代码文件”属性