我看过类似的问题，但似乎找不到解决方案。我正在使用基于 TWIG/Slim 框架的 UserFrosting。我的代码在下面，并产生以下错误，没有显示 map 。
TypeError: a is 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>
最佳答案
如果您正确使用 UserFrosting/Slim，您不应期待直接来自 MarkersController.php 的响应。
假设您的 MarkersController.php 有一个类似 getMarkersJSON() 的方法来生成您需要的 JSON 数据，您需要创建一个路由在你的 index.php 中像这样:
$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 并确保您看到您期望的原始数据来测试您的路线是否正常工作。
我建议您看一下 UserFrosting documentation以确保您了解前端 Controller 模式。
关于javascript - 谷歌地图类型错误 : a is null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32144716/