Google Map-API 加载速度很慢答案

【问题标题】：Google Map- API loading is very slowGoogle Map-API 加载速度很慢
【发布时间】：2014-01-31 05:25:59
【问题描述】：

我的页面已加载谷歌地图，但使用 Jquery 我将其隐藏。单击按钮时，它应该显示我在该页面中加载的谷歌地图。但我无法看到完整的地图，即我只看到地图的一部分。以下是我的代码：-

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style id="my-css">
map,div[map] {
    display: block;
    width: 600px;
    height: 400px
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="scripts/plunkr.js"></script>
<script src="scripts/app.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAa24xicak8_ghHX58i7La7hRFh9iM79SNC94rOejOtdMRvQmJiBS6Uv5F_1BNSh9ZuSzFXyekHISgew">    </script>

<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
$(document).ready(function(){

$("#maps12").hide();
$("button").click(function(){
$("#maps12").show();
});
});
</script>
<script src="../dist/ng-map.min.js"></script>
</head>

<body>
    <div class="main">
        <header> 
        DEMO    
        </header>
        <section>
        <div id="maps12">
            <div id="map-canvas" style="width: 600px; height: 400px"></div>
            </div>
        </section>
        <footer>
        <button>click me</button>   
        </footer>
    </div>
</body>
</html>

【问题讨论】：

它们是可用于 AngularJS 的 Google 地图和 UI 地图外观的指令 @angular-google-maps.org 和 angular-ui.github.io/ui-map

标签： javascript jquery html google-maps angularjs

【解决方案1】：

您正在使用窗口的onload 事件和隐藏元素加载 Google 地图。然后您再次显示它因此地图有点卡住以调整大小。

所以当你显示 div 时，trigger the resize 谷歌地图的事件就像

$(document).ready(function() {
    $("#maps12").hide();
    $("button").click(function() {
        $("#maps12").show();
        google.maps.event.trigger(map, "resize");
    });
});

JSFiddle

【讨论】：

@NishanShah 我不明白什么不起作用，请参阅此处（fiddle 1）我已经在我的答案中重现了您的问题和修复。如果仍然存在，请创建一个小提琴，以便我可以帮助您。
它运行良好，但加载时间非常长......我该怎么办？？
@NishanShah 嗯，我没有发现小提琴的缓慢。不在您的项目中工作？可以的话分享一下网址，让我试试？