浏览JSON和绘制圆圈;我不能使用谷歌地图

Going through JSON and drawing circles doesn't work with a Google Map

本文关键字：不能 谷歌地图 JSON 绘制 浏览      更新时间：2023-09-26

我正在使用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"}]

作为类型CCD_ 1。JS肯定会收到这样的消息，因为网络控制台显示它正在这样做，就像我放入的控制台写入行一样

然而，由于某些原因，包括上面的JavaScript会导致地图完全消失。控制台中什么都没有，只是从DOM中消失了。这很奇怪。

有人知道是什么原因导致了这种情况，以及如何解决吗？

谢谢！

我很惊讶你的控制台中没有错误-也许你在浏览器中禁用了一些错误输出，因为这是无效的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);
});

这是你所期望的吗？

相关文章：