Javascript Google地图类型错误：a为空_Javascript_Google Maps_Google Maps Api 3_Slim_Userfrosting

Javascript Google地图类型错误：a为空

javascript google-maps google-maps-api-3

Javascript Google地图类型错误：a为空,javascript,google-maps,google-maps-api-3,slim,userfrosting,Javascript,Google Maps,Google Maps Api 3,Slim,Userfrosting,我看过类似的问题，似乎找不到解决办法。我使用的是基于TWIG/Slim框架的UserFrosting。我的代码如下，并在没有显示地图的情况下产生以下错误 TypeError:a是null1 main.js:19:628 <!DOCTYPE html> <html lang="en"> {% include 'components/head.html' %} <body> <div id = "wrapper">

我看过类似的问题，似乎找不到解决办法。我使用的是基于TWIG/Slim框架的UserFrosting。我的代码如下，并在没有显示地图的情况下产生以下错误

TypeError:a是null1 main.js:19:628

<!DOCTYPE html>
<html lang="en">
    {% include 'components/head.html' %}

    <body>
        <div id = "wrapper">
            {% include 'components/nav-account.html' %}
            <div id = "page-wrapper">
                {% include 'components/alerts.html' %}

                <div class = "container">
                    <style type = "text/css">
                        html, body, #map-canvas{ height:100%;
                                                 margin:0;
                                                 padding:0;
                        }
                    </style>

                    <script type = "text/javascript"
                            src = "https://maps.googleapis.com/maps/api/js?
                            key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs">
                    </script>
                    <script type="text/javascript">
                        var map = null;
                        var iLoadPoints = 0;
                        function addMarker(lat, lng) {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(lat, lng),
                                map: map,
                            });
                        }


                        function initialize() {
                            var mapOptions = {
                                center: {lat: 54.872128, lng: -6.284874},
                                zoom: 13
                            };
                            map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);


                            $(document).ready(function () {

                                $.getJSON('MarkersController.php', function (data) {


                                    var locations = JSON.parse(data);

                                    for (var i = 0; i < locations.length; i++) {
                                        addMarker(locations[i].lat, locations[i].lng);
                                    }
                                });
                            });


                        }


                        google.maps.event.addListenerOnce(map, 'idle', function () {
                            iLoadPoints += 1;
                            if (iLoadPoints === 2) {
                                initialize();
                            }
                        });

                        google.maps.event.addDomListener(window, 'load', function () {
                            iLoadPoints += 1;
                            if (iLoadPoints === 2) {
                                initialize();
                            }
                        });



                    </script>

                    <div id="map-canvas" style="height:600px; width:600px;
                         margin-top:100px; margin-bottom: 100px;
                         ">

                    </div>
                </div>
                {% include 'components/footer.html' %}    

            </div>
        </div>
    </body>

</html>


{%include'组件/head.html%}
{%include'组件/nav account.html%}
{%include'组件/alerts.html%}
html、正文、地图画布{高度：100%；
保证金：0；
填充：0；
}
var-map=null；
var-iLoadPoints=0；
功能添加标记器（lat、lng）{
marker=新的google.maps.marker({
位置：新google.maps.LatLng（lat，lng），
地图：地图，
});
}
函数初始化（）{
变量映射选项={
中心：{lat:54.872128，lng:-6.284874}，
缩放：13
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
$（文档）.ready（函数（）{
$.getJSON（'MarkersController.php'，函数（数据）{
var locations=JSON.parse（数据）；
对于（变量i=0；i

您应该在src属性中传递函数，如下所示：

src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs&callback=initialize"

$app->get('/markers/json/?', function () use ($app) {
    $controller = new UF\MarkersController($app);
    return $controller->getMarkersJSON();
});

这是一个有效的方法。

如果您正确使用UserFrosting/Slim，您不应该期望直接从

MarkersController.php

得到响应

假设您的

MarkersController.php

有一个类似于

getMarkersJSON（）

的方法来生成所需的JSON数据，您需要在

index.php

中创建一个路由，如下所示：

src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB76xBqfQdgOLV77VK3JZ09vWwk8brkMFs&callback=initialize"

$app->get('/markers/json/?', function () use ($app) { $controller = new UF\MarkersController($app); return $controller->getMarkersJSON(); });
然后在对
getJSON
的jQuery调用中，您将执行以下操作：

$.getJSON('/markers/json', function (data) { ... });
只需导航到
http://example.com/markers/json
并确保您看到预期的原始数据

我建议您查看，以确保您了解前端控制器模式。
的可能重复项为了帮助您使用标记，请给我一个您从
MarkersController.php
file.alexw获得的JSON示例-干杯！现在有更好的理解。然而，当我导航到/markers/json时，我没有得到任何输出，控制台显示“html文档的字符编码没有声明…”，尽管MarkersController.php中没有html。它应该输出json，而不是html，对吗？您可能只需要设置标题。看看（因为UF是基于Slim构建的）我是否在MarkersController中设置了标题？或者在index.php中的路由中？无论哪种方式，我都可能在
MarkerController
中执行。请继续并将此答案标记为“已接受”，然后加入我们的聊天：