从数据库向 GoogleMaps 添加标记会导致位置 1 的 JSON 中出现意外的标记 o答案

【问题标题】：Adding markers to GoogleMaps from database causes Unexpected token o in JSON at position 1从数据库向 GoogleMaps 添加标记会导致位置 1 的 JSON 中出现意外的标记 o
【发布时间】：2019-01-21 15:08:58
【问题描述】：

我实施了一个网络爬虫，它从英国各地的橄榄球俱乐部爬取了详细信息，例如 place_id , name, address, lat, lng。这些都在 mysql 数据库中，然后我显然需要它们显示在我的页面上，该页面上有地图。我对这些事情知之甚少，已经尝试过，尝试遵循这些指南，但我没有快乐。我正在使用 PDO 连接到数据库以从我的 locations 表中提取这些字段。

代码：

error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once("connect.php");

$select = "SELECT * FROM locations";
$data = $pdo->query($select);
foreach($data as $key){
$locations[] = array('name' => 'Location Name', 
'address'=>$key['address'], 'lat'=>$key['lat'], 'lng'=>$key['lng']);
}
$markers = json_encode($locations);

 ?>
 <!DOCTYPE html>
 <html lang ="en-US">
 <head>
  <script type="text/javascript">

  <?php
  echo "var markers = $markers;\n";
  ?>
 function initMap(){
var kingston = {lat: 51.4123, lng:-0.3007};
var map = new google.maps.Map(
  document.getElementById('map'), {
    center: new google.maps.LatLng(kingston.lat, kingston.lng),
    zoom: 8,
    styles: [
          {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
          {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
          {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
          {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{color: '#263c3f'}]
          },
          {
            featureType: 'poi.park',
            elementType: 'labels.text.fill',
            stylers: [{color: '#6b9a76'}]
          },
          {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{color: '#38414e'}]
          },
          {
            featureType: 'road',
            elementType: 'geometry.stroke',
            stylers: [{color: '#212a37'}]
          },
          {
            featureType: 'road',
            elementType: 'labels.text.fill',
            stylers: [{color: '#9ca5b3'}]
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [{color: '#746855'}]
          },
          {
            featureType: 'road.highway',
            elementType: 'geometry.stroke',
            stylers: [{color: '#1f2835'}]
          },
          {
            featureType: 'road.highway',
            elementType: 'labels.text.fill',
            stylers: [{color: '#f3d19c'}]
          },
          {
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [{color: '#2f3948'}]
          },
          {
            featureType: 'transit.station',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'water',
            elementType: 'geometry',
            stylers: [{color: '#17263c'}]
          },
          {
            featureType: 'water',
            elementType: 'labels.text.fill',
            stylers: [{color: '#515c6d'}]
          },
          {
            featureType: 'water',
            elementType: 'labels.text.stroke',
            stylers: [{color: '#17263c'}]
          }
        ]
      });
var infoWindow = new google.maps.infoWindow(), marker, lat, lng;
var json=JSON.parse(markers);

for(var o in json){
  lat = json[o].lat;
  lng = json[o].lng;
  name= json[o].name;

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat,lng),
    name: name,
    map: map
  });
  google.maps.event.addListener(marker, 'click' function(e)({
    infowindow.setContent(this.name);
    infowindow.open(map, this);
  }.bind(marker));
  }
  }
 </script>
 <script async defer src="https://maps.googleapis.com/maps/api/js? 
key=Omitted=initMap">
 </script>

JSON 中位置 1 的意外标记 o 是抛出的错误/

【问题讨论】：

错字InfoWindow 不是infowindow
@gecodezip 我是个白痴！谢谢！愚蠢的错别字，这是一个全新的过程。我没有得到任何进一步的结果，尽管它在位置 1 处抛出 Unexpected token o in JSON

标签： javascript google-maps pdo

【解决方案1】：

改变

var infoWindow = new google.maps.infoWindow()

到

var infoWindow = new google.maps.InfoWindow()

【讨论】：

抱歉，我在你发布之前一秒钟就修复了这个问题。还是看看编辑谢谢

【解决方案2】：

我解决了这个问题！，它试图无缘无故地解析 JSON。删除 JSON.parse.. 解决了这个问题！

【讨论】：