Question

我在加载谷歌地图时遇到问题。在我的脑子部分，我有以下代码（我有一个正确的Google API密钥）

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript">
    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    }
</script>

我的身体部分开头如下：

<div class="page">
    <div id="header">
        <div id="title">
            <h1>My MVC Application</h1>
            <div id="map_canvas" style="width: 100%; height: 100%"></div>

这不起作用。但是当我在身体后面移动“map_canvas”div时：

<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
    <div class="page">
        <div id="header">

一切正常。你能帮我吗。另外，我如何使用jQuery而不是调用initialize方法？

Answer 1

正如Bassam所说，你需要设置一个明确的像素宽度和高度。否则，请查看page, header, and title元素的CSS。这些元素的宽度和高度需要级联到map_canvas元素。

要使用jQuery而不是初始化，请从onload="initialize()"元素中删除body并在initialize()函数上添加以下代码：

$(document).ready(function() {
   initialize();
 });

谷歌地图不想加载

1 个答案: