当我打开检查元素它将工作时，Google地图没有完全加载 [英] Google map not fully loaded when i open inspect element it will work
问题描述
我已经在我的网站上集成了一个谷歌地图，但是当我打开检查元素地图将工作，当我关闭地图将消失。请让我知道问题
i have integrate a google map on my website but when i open inspect element map will work and when i close map will disappear. Please let me know what the problem
之前的
打开检查元素。
代码在这里
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input type="text" id="latitude" placeholder="latitude">
<input type="text" id="longitude" placeholder="longitude">
<div id="map" style="width:500px; height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
var latitude = -25.363882;
var longitude = 131.044922;
var zoom = 7;
var LatLng = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (marker) {
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
}
initialize();
</script>
</body>
</html>
推荐答案
解释当您打开开发工具：
窗口的视口大小更改，窗口的大小事件触发，映射的大小将被重新计算。当您以任何其他方式调整窗口大小时，也会发生这种情况。
To explain what happens when you open the dev-tools: The viewport-size of the window changes, the resize-event of the window fires and the size of the map will be re-calculated. The same will happen when you resize the window in any other manner.
与选项卡的使用相关（ http://jsfiddle.net/KhwZS/1300/ ）：
最初隐藏地图标签（map-大小为0x0），当地图标签被激活时触发窗口的resize事件（这将强制重新计算地图大小）：
Related to the usage of tabs(http://jsfiddle.net/KhwZS/1300/): The map-tab initially is hidden(the map-size is 0x0), trigger the resize-event of the window when the map-tab has been activated(which will force the re-calculation of the map-size):
$( ".tabs" ).tabs({
activate: function( event, ui ) {if(ui.newPanel.has('#map-canvas')){
google.maps.event.trigger(window,'resize',{});};}
});
演示： http://jsfiddle.net/KhwZS/1476/
由于目前还不清楚哪个代码在截图我的答案是：
在显示地图时触发窗口或地图的大小事件
As it's still unclear which code creates the map in the screenshot my answer is: trigger the resize-event of the window or map when you show the map
这篇关于当我打开检查元素它将工作时，Google地图没有完全加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
