通过 JSON 和绘制圆圈不适用于 Google 地图

Question

我正在使用 Google Maps JavaScript API 尝试循环遍历 JSON 数组，获取一系列参数并根据这些参数在地图上绘制圆圈，但它不起作用......根本......

我使用的 JS/jQuery 代码如下：

    $.getJSON( "fetch-beacons.php", function( beacons ) {
    beacons.forEach(function(beacon) {
            var circle = new google.maps.Circle({
                              strokeColor: '#add8e6',
                              strokeOpacity: 0.8,
                              fillColor: '#add8e6',
                              fillOpacity: 0.35,
                              map: map,
                              center: new google.maps.LatLng(Number(beacon.lat)), (Number(beacon.lng)),
                              radius: Number(beacon.radius)
                            });
             var contentString = '<div id="content">' + '<h1 id="firstHeading" class="firstHeading">Beacon worth ' + beacon.creds + ' credits</h1>' + '</div>';

          var beaconinfowindow = new google.maps.InfoWindow({
                                content: contentString
            });
            circle.addListener('click', function() {
                beaconinfowindow.open(map, circle);
            });

  });
});

fetch-beacons.php 返回：

[{"id":"18","lat":"51.50561","lng":"-0.32425999999999994","creds":"1","radius":"465","uid":"1"},{"id":"20","lat":"51.505595655042406","lng":"-0.32432774740810555","creds":"1","radius":"275","uid":"1"}]

键入application/JSON。 JS 肯定会这样接收它，因为网络控制台显示它是这样做的，就像我输入的控制台写行一样。

但是，出于某种原因，包括上面的 JavaScript 会导致地图简单地消失。控制台中什么都没有，它只是从 DOM 中消失了。这很奇怪。

任何人对可能导致此问题的原因以及如何解决此问题有任何想法？

谢谢！

Answer 1

我很惊讶您的控制台中没有错误 - 也许您在浏览器中禁用了一些错误输出，因为那是无效的 javascript

问题出在这一行

center: new google.maps.LatLng(Number(beacon.lat)), (Number(beacon.lng)),

应该是

center: new google.maps.LatLng(Number(beacon.lat), Number(beacon.lng)),

---

检查控制台输出

$.getJSON( "fetch-beacons.php", function( beacons ) {
    console.log(beacons);
});

这是你所期望的吗？