print json result to google maps

У меня есть index.php и ajax.php. При загрузке страницы функция ajax возвращает данные json из ajax.php. Ajax.php работает. Я могу получить данные json. Карта загружается во-первых, чем функция ajax, поэтому я получаю переменную json, не определенную ошибку. Если я напрямую использую результат данных json. Например, var json = [{{"id": 48, "title": "a", "lng": "28.6643180847168", "lat": "41.0327529907227"}} мой код работает. Сначала карта загружается, поэтому она дает ошибку. Какой должен использовать другой метод? Надеюсь, я мог бы достаточно объяснить.print json result to google maps

Это мои данные JSON результат:

[{ "ID": 48, "название": "а", "LNG": "28,6643180847168", "ш": "41,0327529907227"}, {"id": 46, "title": "b", "lng": "28.6722145080566", "lat": "41.0330085754395"}, {"id": 44, "title": "c", "lng" : "28.6628570556641", "lat": "41.032169342041"}, {"id": 43, "title": "d", "lng": "28.6649876832962", "lat": "41.0323740058176"}];

Это index.php

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <style> 
      html, body, #map-canvas {height: 100%;margin: 0;padding: 0;} 
     </style> 
    </head> 
    <body> 
     <div id="one"></div> 
     <div id="map-canvas"></div> 
     <script> 
     $(window).load(function() { 
      $.ajax({ 
       dataType: "json", 
       url: 'ajax.php', 
       success:function(data){   
        var result = JSON.stringify(data); 
        $("#one").html(result); 
       } 
      }); 
     }); 
     var map; 
    var json=$("#one").text(); 
function initialize() { 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(json[0]['lat'],json[0]['lng']) 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    // Looping through all the entries from the JSON data 
    for(var i = 0; i < json.length; i++) { 
    var obj = json[i]; 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(obj.lat,obj.lng), 
     map: map 
    }); 
    var clicker = addClicker(marker, obj.title); 
    } 
    function addClicker(marker, content) { 
    google.maps.event.addListener(marker, 'click', function() { 
     if (infowindow) {infowindow.close();} 
     infowindow = new google.maps.InfoWindow({content: content}); 
     infowindow.open(map, marker);  
    }); 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
    </body> 
</html>

источник

2016-06-21 Mike Henley

я решил мою проблему. Я возвращаю значения lat и long на карту. это может помочь кому-то.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <style> 
      html, body, #map-canvas {height: 100%;margin: 0;padding: 0;} 
     </style> 
    </head> 
    <body> 
     <div id="map-canvas"></div> 
     <script> 
    var map; 
function initialize() { 
    var url ="ajax.php"; 
    $.getJSON(url, function(data) { 
       var lat = []; 
     var lng = []; 
      $.each(data, function(key, val) { 
         lat.push(val.lat); 
      lng.push(val.lng); }); 
var mapOptions = { 
zoom: 15, 
center: new google.maps.LatLng(lat[0],lng[0]) 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
for(var i = 0; i < lat.length; i++) { 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat[i],lng[i]), 
    map: map 
}); 

} });}; 

google.maps.event.addDomListener(window, 'load', initialize);     
     </script> 
    </body> 
</html>

источник

2016-06-30 01:46:17

Я изменил код, он работает на моем eviroment.

$.ajax({ 
      dataType: "json", 
      type: "POST",//please check this. 
      contentType: "application/json; charset=utf-8",//check this 
       url: "http://localhost/MyTESTWEBSITE/WebService.asmx/HelloWorld",//my json data 
       success: function(data) { 
       var result = jQuery.parseJSON(data.d); //please check this 
       for (var i = 0; i < result.DATA.length; i++) { 
        var obj = result.DATA[i]; 
        //to do:Put obj.lat, obj.lng to google map 
        } 
       }, 
       error: function(xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(thrownError); 
       } 
      }); 
     });

JSON данные из .net

[WebMethod] 
public string HelloWorld() { 

    string str = "{\"DATA\":[{\"id\":43,\"title\":\"d\",\"lng\":\"121.6649876832962\",\"lat\":\"23.0323740058176\"}]}"; 
    return str; 
}

Вы также можете использовать эту ссылку, чтобы проверить JSON Отформатируйте
https://jsonformatter.curiousconcept.com/

источник

2016-06-22 00:29:01

Вы правы, я пытался, как вы сказали. Но маркеры не создаются на карте. Если я пишу, например, json = [{"id": 48, "title": "a", "lng": "28.6643180847168", "lat": "41.0327529907227"}, {"id": 46, " заголовок ":" b "," lng ":" 28.6722145080566 "," lat ":" 41.0330085754395 "}, {" id ": 44," title ":" c "," lng ":" 28.6628570556641 "," lat ":" 41.032169342041 "}, {" id ": 43," title ":" d "," lng ":" 28.6649876832962 "," lat ":" 41.0323740058176 "}]; создаются маркеры данных. В противном случае маркеры не создаются. –

Вы проверяете содержимое obj.lat && obj.lng от php? если вы предупреждаете() о содержании, правильно? –

Я просто хочу узнать, как использовать данные json data для карт google. Мой код сейчас не работает. Когда страница загружается как на карту, так и на загрузку ajax, поэтому я не могу использовать результат json data на карте. –

print json result to google maps

ответ

Смежные вопросы