2016-07-24 4 views
0

Ich fange an, Google Map zu lernen. Es ist merkwürdig, dass Marker, wenn sie statisch deklariert sind, funktionieren und angezeigt werden, aber wenn sie aus der DB kommen, werden sie nicht auf der Karte gezeichnet.Google Map Marker funktioniert nicht, wenn von DB

// var markers = [[15.054419, 120.664785, 'Device1'], [15.048203, 120.692186, 'Device 2'], [15.033303, 120.694611, 'Device 3']]; 
var markers = []; 

Ich habe den gesamten Code hier, vielleicht fehlt mir etwas? Ich habe sogar das Konsolenprotokoll verwendet und alle Daten von AJAX erfolgreich an markers Variable übergeben.

Ich denke, ich habe diesen Code irgendwo hier in SO und modifizierte es für meine DB Anrufe für Datensätze. Ich hoffe, Sie können mir dabei helfen. Vielen Dank!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 
<script type="text/javascript"> 
    var map; 
    var global_markers = [];  
// var markers = [[15.054419, 120.664785, 'Device1'], [15.048203, 120.692186, 'Device 2'], [15.033303, 120.694611, 'Device 3']]; 
    var markers = []; 

    var infowindow = new google.maps.InfoWindow({}); 

    function initialize() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(15.058607, 120.660884); 
     var myOptions = { 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     $.ajax({ 
      type: 'GET', 
      url: 'control_panel/get_device_list_ajax', 
      success: 
       function (data) { 
        data = JSON.parse(data); 
        if (data['success']){ 
         var device = data['device_list']; 
         device.forEach(function (dev) { 
          markers.push([dev['dev_geolat'], dev['dev_geolng'], dev['dev_name']]); 
          //console.log(markers); 
         }); 
         addMarker(); 
        } else { 

        } 
       } 
     }); 
    } 

    function addMarker() { 
     console.log(markers); 
     for (var i = 0; i < markers.length; i++) { 
      // obtain the attribues of each marker 
      var lat = parseFloat(markers[i][0]); 
      var lng = parseFloat(markers[i][1]); 
      var trailhead_name = markers[i][2]; 

      var myLatlng = new google.maps.LatLng(lat, lng); 

      var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>"; 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name 
      }); 

      marker['infowindow'] = contentString; 

      global_markers[i] = marker; 

      google.maps.event.addListener(global_markers[i], 'click', function() { 
       infowindow.setContent(this['infowindow']); 
       infowindow.open(map, this); 
      }); 
     } 
    } 

    window.onload = initialize; 
</script> 

EDIT Hier die jsfiddle ist habe ich mit dieser Arbeit http://jsfiddle.net/kjy112/ZLuTg/ (vielen Dank an die, die mich dazu führen)

Antwort

1

Könnten Sie den Zugriff auf die Art und Weise in Beziehung gesetzt werden zu erbringenden JSon von ajax

markers.push([dev.dev_geolat, dev.dev_geolng, dev.dev_name]); 

oder json Inhalt

+0

Vielen Dank für Ihre schnelle Antwort. Aber es hat den gleichen Effekt, ich bekomme immer noch die gleichen 'console.log (marker); 'der' device_list', aber keine Marker auf Google Map. – jck

+1

zeigen Sie eine (kurze) Probe Ihrer Marker json Ergebnis – scaisEdge

+0

OMG! Es tut mir Leid. Ich habe gerade herausgefunden, dass meine DB-Werte nach einigen Stunden, die überprüfen, warum sie nicht angezeigt werden, falsch sind, aufgrund eines falschen Tabellenfelddatentyps ("lat/lng"). Danke, dass ich die Ergebnisse auf dem Konsolenprotokoll überprüft habe und sie übersehen habe, bevor ich eine Frage gepostet habe. Danke nochmal für Hilfe. Es funktioniert jetzt. – jck

1

ich weiß nicht, wie zu schließen Diese Frage, als ich einige Probleme auf meiner DB übersehen, aber ich werde meine Antwort posten, wenn jemand mit dem gleichen Problem kommen kann (Nun, ich bin mir nicht sicher, hehe)

Ich bekomme die gleiche Antwort von AJAX der Werte in DB und ich bin nicht in der Lage, Markierungen auf MAP zu zeichnen, fand ich, dass db->table->fields LAT LNG mit einem Datentyp von referenziert werden und änderte es in FLOAT (10, 6), was in diesem GOOGLE MAP Tutorial - Using PHP/MySQL with Google Maps gefunden wird.

Das Problem bei dem Feld zuvor war, dass höhere Werte eher als 99,999999 anstelle des tatsächlichen Werts (z. B. 120.XXXXX) gespeichert werden.