Question

我正在尝试将谷歌地图图片放入我的HTML页面。我无法触及<head>部分，因为页面是使用PHP代码动态加载的（这里没有解释这个逻辑）。

因此，我构建了以下HTML测试代码，这些代码不起作用 - 地图不会出现在屏幕上。

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta charset="UTF-8" />
        <title>TEST PAGE</title>
   </head>

   <body>

        <h1>Maps test page.</h1>

            <script type="text/javascript">

            function initialize() {

                alert("Initialize");

                var mapCanvas = document.getElementById("mapCanvas");

                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                }

                var map = new google.maps.Map(mapCanvas, mapOptions);

                google.maps.event.addDomListener(window, "load", initialize);
            }

            window.onload = function() {
                alert("Onload");
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js";
                document.body.appendChild(script);
            }

            </script>

            <div id="mapCanvas" style="width: 650px; height: 350px;"></div>";
            <script type="text/javascript"> initialize() </script>

   </body>
</html>

警报即将出现，但没有显示地图......

我们非常感谢帮助。

Answer 1

问题是，在将Google Maps Javascript添加到页面之前，initialize()正在执行。在window.onload回调中，在DOM加载完成之前，您不会导入Google Maps JS。试试这个：

<div id="mapCanvas" style="width: 650px; height: 350px;"></div>

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    alert("Initialize");
    var mapCanvas = document.getElementById("mapCanvas");
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }

  window.onload = function() {
    initialize();
  };
</script>

Answer 2

Asynchronously load the Google Maps Javascript API，使用callback参数运行initialize功能。

working example

<html lang="en-us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta charset="UTF-8" />
        <title>TEST PAGE</title>
   </head>

   <body>

        <h1>Maps test page.</h1>

            <script type="text/javascript">

            function initialize() {

                alert("Initialize");

                var mapCanvas = document.getElementById("mapCanvas");

                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                }

                var map = new google.maps.Map(mapCanvas, mapOptions);

                google.maps.event.addDomListener(window, "load", initialize);
            }

            window.onload = function() {
                alert("Onload");
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
                document.body.appendChild(script);
            }

            </script>

            <div id="mapCanvas" style="width: 650px; height: 350px;"></div>";


   </body>
</html>

在页面上添加谷歌地图图像而不触及该部分

2 个答案: