2017-07-26 57 views
-1

我真的需要你的幫助。我有一個腳本,其中有一個顯示標記的googlemap首頁。我似乎無法找到我的腳本中的問題(錯誤)

在每個瀏覽器中,我都會收到json錯誤。 隨着在Mozilla螢火我得到這個:

ReferenceError: json is not defined[Meer info] index.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

下面我markers.php代碼和index.js:

markers.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(); 
} 
?> 

index.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'f\hv'a\]h\]o\0099FF'fC\FFFFFF'tC\FF0000'eC\Lauto'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); 
}; 

有人可以幫我嗎?

更新:

現在我沒有收到錯誤,但仍沒有任何標記。以下是我的index.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&region=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> 
+1

1 **不要**使用**過時和不安全的**'mysql_ *'-functions。從PHP 5.5(2013年)開始,它們已被棄用,並且在PHP 7中(2015年)完全刪除。改用MySQLi或PDO。 2. **您可以[SQL注入](http://php.net/manual/en/security.database.sql-injection.php)**開放,並且確實應該使用[準備好的語句](http:/ /php.net/manual/en/mysqli.quickstart.prepared-statements.php)而不是連接你的查詢,如果你使用上面提到的MySQLi或PDO,可以使用它們。 –

+2

嘗試設置json var之前使用它...在您的loadMarkers()函數中,只需添加: var json = null; –

+0

你爲什麼使用'eval()'?爲什麼不直接用'JSON:parse(xmlhttp.responseText)'解析json字符串呢? –

回答

1

錯誤正確解釋了問題。 'json'變量在'loadMarkers'函數中使用之前尚未定義。

鍵入下面一行在loadMarkers函數的開始:

var json = null; 
相關問題