我真的需要你的帮助。我有一个脚本,其中我有一个显示标记的谷歌地图首页。
在每个浏览器中,我都会收到 json 错误。 对于 Mozilla 中的萤火虫,我得到了这个:
引用错误:未定义 json [Meer info] 索引.js:54:1 loadMarkers/xmlhttp.onreadystatechange http:///inkaart/index.js:54:1 openRemotePrompt jar:file:///C:/Program%20Files%20(x86(/Mozilla%20Firefox/omni.ja!/components/nsPrompter.js:494:9 openPrompt jar:file:///C:/Program%20Files%20(x86(/Mozilla%20Firefox/omni.ja!/components/nsPrompter.js:529:17 alert jar:file:///C:/Program%20Files%20(x86(/Mozilla%20Firefox/omni.ja!/components/nsPrompter.js:602:9 loadMarkers/xmlhttp.onreadystatechange http:///inkaart/index.js:49:4
在我的标记下面.php代码和索引.js:
标记.php
<?
header('Content-type: application/json');
$connect = mysql_connect("localhost","user","blablabla") or die("Could not connect");
$db = mysql_select_db("databaseblabla",$connect) or die("db invalid");
$sql = 'where 1=1';
foreach ($_GET as $field=>$value) { if ($field!='t') {
$field = substr($field, 0, strlen($field)-1);
if ($vorig_field==$field) {
$sql = str_replace($field." in (", $field." in ('".$value."', ", $sql);
}
else {
$sql .= " and ".$field." in ('".$value."')";
}
$vorig_field=$field;
}}
// te optimaliseren: COALESCE gebruikt geen index meer
//$sql = str_replace(' and afdeling ', " and coalesce(afdeling, 'null') ", $sql);
$sql = str_replace('[where]', $sql, return_output('markers.sql'));
$rs = mysql_query($sql) or die($sql.' '.mysql_error());
while ($rw = mysql_fetch_array($rs)) {
// als een vestiging meerdere samenwerkingsverbanden dan samenvoegen!
if ($vorig_id==$rw['vestigingsnummer'].$rw['instelling_id'].$rw['vestigingsnaam']) {
$markers[$i]['samenwerking'] .= '<br />'.$rw['samenwerking'];
}
// en anders een nieuwe marker met alle kolommen van de query
else {
$i++;
foreach ($rw as $field=>$value) {
if (is_numeric($field)==false && isset($value)==true) {
$markers[$i][$field] = $rw[$field];
}}
}
$markers[$i]['samenwerking'] = str_replace(' ()','',$markers[$i]['samenwerking']); //lege opmerkingen
$vorige_afdeling=$rw['afdeling'];
$vorig_id=$rw['vestigingsnummer'].$rw['instelling_id'].$rw['vestigingsnaam'];
}
mysql_close($connect);
die(json_encode($markers));
function return_output($file){
ob_start();
include $file;
return ob_get_clean();
}
?>
索引.js
var map;
var markersArray = [];
var infoArray = [];
var infowindowZIndex = 0;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.372, 4.899),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// object voor AJAX
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('titel'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('legenda'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('zoeken'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('loading'));
loadMarkers();
}
function loadMarkers() {
document.getElementById('loading').style.visibility='visible';
// parameter ?t om caching te voorkomen
xmlhttp.open("GET","markers.php?t=" + Math.random() + loadQuerystring(),true);
xmlhttp.send();
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) {
try {
json = eval('(' + xmlhttp.responseText + ')');
}
catch (error) {
alert('ERROR: ' + xmlhttp.responseText);
}
deleteMarkers();
for(id in json) {
createMarker(json[id]);
}
document.getElementById('loading').style.visibility='hidden';
}}
}
function loadQuerystring() {
var where = '';
var checked = false;
var boxes = getElementsByClassName("soort", "input");
for (var i=0;i<boxes.length;i++) { if (boxes[i].checked) {
where += '&soort'+i+'='+escape(boxes[i].value);
checked = true;
}}
if (checked == false) {
where += '&soort0=bladiebladiebla';
}
checked = false;
var boxes = getElementsByClassName("specialisatie", "input");
for (var i=0;i<boxes.length;i++) { if (boxes[i].checked) {
where += '&specialisatie'+i+'='+escape(boxes[i].value);
checked = true;
}}
if (checked == false) {
where += '&specialisatie0=bladiebladiebla';
}
checked = false;
var boxes = getElementsByClassName("afdeling", "input");
for (var i=0;i<boxes.length;i++) { if (boxes[i].checked) {
where += '&afdeling'+i+'='+escape(boxes[i].value);
checked = true;
}}
if (checked == false) {
where += '&afdeling0=bladiebladiebla';
}
return where;
}
function createMarker(json) {
var contentString = '<div class="infowindow">'+
json['vestigingsnaam']+'<br />'+
json['straatnaam']+' '+json['huisnummer']+'<br />'+
json['postcode']+' '+json['plaatsnaam']+'<br />'+
'Tel: '+json['telefoonnummer']+'<p />'+
'<b>Samenwerking(en):</b><br />'+json['samenwerking']+
'</div>';
// InfoWindowZ (met Z) zodat het een click event krijgt (zie verder)
var infowindow = new google.maps.InfoWindow({
content: contentString,
disableAutoPan: true,
maxWidth: 250
});
var myLatlng = new google.maps.LatLng(json['lat'], json['lon']);
// http://www.googlemapsmarkers.com/v1/LABEL/FILL COLOR/LABEL COLOR/STROKE COLOR/
// http://chart.apis.google.com/chart?cht=d&chdp=mapsapi&chl=pin'i'[A'-2'fhv'a]h]o 099FF'fCFFFFFF'tCFF0000'eCLauto'f&ext=.pngs
//zie ook https://developers.google.com/chart/image/docs/making_charts
if (json['afdeling']) {
var image = 'http://www.googlemapsmarkers.com/v1/'+json['specialisatie']+'/'+json['soort']+'/ffffff/000000';
}
else {
var image = 'images/marker'+json['soort']+'.png';
}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title:json['vestigingsnaam']
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
markersArray.push(marker);
infoArray.push(infowindow);
}
function Zoek() {
var result = false
document.getElementById('loading').style.visibility='visible';
var zoektext = document.getElementById('zoektext').value.toLowerCase();
if (infoArray) {
for (i in infoArray) {
infoArray[i].close()
if (infoArray[i].getContent().toLowerCase().indexOf(zoektext)>-1) {
infoArray[i].open(map, markersArray[i]);
result=true;
}}}
document.getElementById('loading').style.visibility='hidden';
if (result == false) {
alert('Geen zoekresultaat');
document.getElementById('zoektext').focus();
}
}
// Deletes all markers in the array by removing references to them
function deleteMarkers() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
infoArray.length = 0;
}
}
// http://stackoverflow.com/questions/14348092/bring-googlemaps-infowindow-to-front
google.maps.InfoWindowZ=function(opts){
var GM = google.maps,
GE = GM.event,
iw = new GM.InfoWindow(),
ce;
if(!GM.InfoWindowZZ){
GM.InfoWindowZZ=Number(GM.Marker.MAX_ZINDEX);
}
GE.addListener(iw,'content_changed',function(){
if(typeof this.getContent()=='string'){
var n=document.createElement('div');
n.innerHTML=this.getContent();
this.setContent(n);
return;
}
GE.addListener(this,'domready',
function(){
var _this=this;
_this.setZIndex(++GM.InfoWindowZZ);
if(ce){
GM.event.removeListener(ce);
}
ce=GE.addDomListener(this.getContent().parentNode
.parentNode.parentNode,'click',
function(){
_this.setZIndex(++GM.InfoWindowZZ);
});
})
});
if(opts)iw.setOptions(opts);
return iw;
}
/*
Developed by Robert Nyman, http://www.robertnyman.com
Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/
var getElementsByClassName = function (className, tag, elm){
if (document.getElementsByClassName) {
getElementsByClassName = function (className, tag, elm) {
elm = elm || document;
var elements = elm.getElementsByClassName(className),
nodeName = (tag)? new RegExp("\b" + tag + "\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
xhtmlNamespace = "http://www.w3.org/1999/xhtml",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
getElementsByClassName = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\s)" + classes[k] + "(\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return getElementsByClassName(className, tag, elm);
};
有人可以帮我吗?
更新:
现在我没有收到错误,但仍然没有任何标记。下面是我的索引.php脚本。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="Jorrit Steetskamp" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>De scholen en samenwerkingsverbanden</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbP9H-ibLr9mQXLfr-rvMzqbta3rILSnY&sensor=false&language=nl®ion=NL"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div class="kader" id="loading"><img src="images/ajax-loader.gif" /> Loading...</div>
<div class="kader" id="titel">
<img src="images/bascule-logo.jpg" align="right" />
<h1>in kaart</h1>Samenwerkingen met scholen en instellingen
</div>
<div class="kader" id="zoeken">
<b>Zoeken<b><br />
<input type="text" name="zoektext" id="zoektext" onkeydown="if (event.keyCode == 13) Zoek()" /><input type="button" value="Zoek" onclick="Zoek();" />
</div>
<div class="kader" id="legenda">
<b>Soort</b><br />
<input type="checkbox" class="soort" name="soort" value='51b7bf' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/51b7bf" />Basisonderwijs<br />
<input type="checkbox" class="soort" name="soort" value='367a7f' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/367a7f" />Gecombineerd onderwijs<br />
<input type="checkbox" class="soort" name="soort" value='1b3d40' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/1b3d40" />Voortgezet onderwijs<br />
<input type="checkbox" class="soort" name="soort" value='ff9600' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/ff9600" />Instelling<br />
<br />
<b>Specialisatie</b><br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='r' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/r/FFFFFF/" />Regulier onderwijs<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='1' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/1/FFFFFF/" />Cluster 1<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='2' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/2/FFFFFF/" />Cluster 2<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='3' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/3/FFFFFF/" />Cluster 3<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='4' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/4/FFFFFF/" />Cluster 4<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='S' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/S/FFFFFF/" />SBO<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='P' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/P/FFFFFF/" />PRO<br />
<input type="checkbox" class="specialisatie" name="specialisatie" value='I' checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/I/FFFFFF/" />Instelling<br />
<br />
<b>Samenwerkende afdeling</b><br />
<?php
$db = new PDO('mysql:host=localhost;dbname=unknown', 'userblaablabla', 'blabla');
foreach($db->query('SELECT * FROM bascule_afdelingen') as $row) {
echo '<input type="checkbox" class="afdeling" name="afdeling" value="'.$row['afdeling'].'" checked onchange="loadMarkers()" /><img class="druppel" src="http://www.googlemapsmarkers.com/v1/A/FFFFFF/FFFFFF/000000/" /><div class="afdeling">'.$row['afdeling'].'</div><br />';
}
?>
<input type="checkbox" class="afdeling" name="afdeling" value="" onchange="loadMarkers()" /><img class="stip" src="images/markerffffff.png" />[geen samenwerking]<br />
</div>
</body>
</html>
该错误正确解释了问题。"json"变量在用于"loadMarkers"函数之前尚未定义。
在 loadMarker 函数的开头键入以下行:
var json = null;