我已经实现了一个网络抓取器，它从英国各地的橄榄球俱乐部(例如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是引发的错误/
更改
var infoWindow = new google.maps.infoWindow()
自
var infoWindow = new google.maps.InfoWindow()
我修复了这个问题！，它无缘无故地尝试解析 JSON。 删除JSON.parse..解决了问题！