Question

我一直在尝试使用Google Maps api（Maps Javascript API）。首先，我制作了一个简单的html文件并制作了一个简单的地图，它起作用了。然后我用标记和折线制作了一个更复杂的代码，它起作用了。

完成此操作后，我决定将其移动到Web应用程序中，问题是我的应用程序只能使用xhtml，而不是html。仍然应该工作。但事实并非如此。

我已经阅读了很多论坛，但是似乎找不到解决我问题的方法。这是我在html文件中尝试过的简单地图代码：

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>My Test</title>
    <style>
        #map {
        height: 100%;
        }

        html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initialize() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MYAPI&callback=initialize">
    </script>
</body>

以下是相同的信息，但是在我的.xhtml文件中：（我的xhtml位于模板上，这就是为什么它没有任何头信息的原因。）

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
<p:dialog  header="#{msg['MAP']}" footer="#{msg['TOURSYS.FOOTER.TITLE']} | #{msg['TOURSYS.FOOTER.VERSION']} | #{msg['TOURSYS.FOOTER.LAST.MODIFICATION.DATE']}" widgetVar="mapDialog" modal="true"  height="auto" width="auto">
    <h:form id="mapForm">
        <html>
            <style>
                #map {
                    height: 100%;
                }

                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
            </style>
            <body>
                <div id="map"></div>

                <script>
                    function initialize() {
                        map = new google.maps.Map(document.getElementById('map'), {
                            center: {lat: -34.397, lng: 150.644},
                            zoom: 8
                        });
                    }

                </script>

                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPI&amp;callback=initialize;"/>

            </body>
        </html>      
    </h:form>           
</p:dialog>

我的Google控制台中弹出以下错误：

获取https://maps.googleapis.com/maps/api/js?key=MYAPI&callback=initialize;净：: ERR_ABORTED 400

我的应用程序在带有Primefaces 6.2.7的Maven Proyect中运行

Answer 1

您的JS调用的src中包含分号（;）。

您的通话：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPI&amp;callback=initialize;"/>

应该是这样的：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPI&amp;callback=initialize"/>

在这个小提琴上尝试一下： http://jsfiddle.net/f74p69gz/

Google Maps API给了我net :: ERR_ABORTED 400

1 个答案: