JQuery die json-gegevens voor Google Maps-visualisatiekaart gebruikt, gebruikt geen json-waarden in $ .each

[{"latitude":"42.658673","longitude":"-73.810479","place":"Bethany Reformed Church"}]

Full function:
google.load("visualization", "1", {packages:["map"]});

    $(function() {
    //when document loads, grab the json
     $.getJSON('places.json', function(data) {
        //once grabbed, we run this callback

        //setup the new map and its variables
         var meetings = new google.visualization.DataTable();
             meetings.addRows(data.length); //length gives us the number of results in our returned data
             meetings.addColumn('number', 'latitude');
             meetings.addColumn('number', 'longitude');
             meetings.addColumn('string', 'place');

        //now we need to build the map data, loop over each result
         $.each(data, function(i,v) {
            //set the values for both the location and place
             alert(i + ":" + v.latitude + ":" + v.longitude + ":" + v.place);
            //The alert displays the correct values
             meetings.setValue(i, 0, v.latitude);
             meetings.setValue(i, 1, v.longitude);
             meetings.setValue(i, 2, v.place);
             //the code stalls and nothing else gets executed
        //finally, create the map!
         var map = new google.visualization.Map(document.getElementById('map_div'));
         map.draw(meetings, {showTip: true, mapType: 'normal'});


If I alert() the json values inside the $.each, they are correct, but the code stalls when the json values are in meetings.setValue(). I came to this conclusion because if I put an alert after the meetings.setValues, nothing pops up.

Uitvoer van waarschuwing:

0:42.658673:-73.810479:Bethany Reformed Church

Als ik de werkelijke locaties in meetings.setValue() hard codeer, wordt de locatie correct toegewezen.

Zoals dit:

$.each(data, function(i,v) {
            //this maps the location correctly
             meetings.setValue(i, 0, 42.658673);
             meetings.setValue(i, 1, -73.810479);
             meetings.setValue(i, 2, 'Bethany Reformed Church');

Waarom lijkt de code vast te lopen in de $ .each wanneer de json-variabelen worden gebruikt?

I have been using this as a guide: Using jQuery, JSON and Google’s Visualization Geo API Together


1 antwoord

Wanneer je het hardcodeert, gebruik je cijfers:

setValue(i, 0, 42.658673);

maar je JSON heeft snaren:


Dus probeer de JSON te veranderen om nummers te verzenden:


of converteer de strings naar getallen voordat je ze naar setValue stuurt:

meetings.setValue(i, 0, +v.latitude);
meetings.setValue(i, 1, +v.longitude);

De unary + converteert de string naar een getal. Voor een explicietere conversie gebruikt u de constructor Number (maar zonder new ).

meetings.setValue(i, 0, Number(v.latitude));
meetings.setValue(i, 1, Number(v.longitude));