jsonの結果をGoogleマップに出力

私はindex.phpとajax.phpを持っています。ページがajax関数をロードしてajax.phpからjsonデータを返すとき。 Ajax.phpが動作しています。私はjsonデータを得ることができます。私は変数jsonを取得するので、マップは最初にajax関数よりもロードされているエラーが定義されていません。私はjsonデータの結果を直接使用します。たとえば、var json = [{{"id"：48、 "title"： "a"、 "lng"： "28.6643180847168"、 "lat"： "41.0327529907227"}]私のコードは動作しています。まずマップがロードされているので、エラーが発生します。どのような方法を使うべきですか？私は十分に説明できることを願っています。jsonの結果をGoogleマップに出力

これは私のJSONデータが結果である：

[{ "ID"：48、 "タイトル"： "A"、 "LNG"： "28.6643180847168"、 "LAT"： "41.0327529907227を"}、 {"id"：44、 "title"： "c"、 "lng"： "41" ： "28.6649876832962"、 "lat"： "41.0323740058176"}; "28.66428770556641"、 "lat"： "41.032169342041"}、{"id"：43、 "title"： "d"、 "lng"

これは、私はそれが私のeviroment上で動作しますが、コードを変更し

<!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

をチェックするために、このリンクを使用することができます私は私の問題を解決しました。地図上に緯度と経度の値を返す。誰かを助けるかもしれない。

<!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

はindex.phpです。

$.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、「タイトル」：「c」、「lng」：「28.6628570556641」、「lat」：「28.6722145080566」、「lat」：「41.0330085754395」}、「タイトル」：「b」、「lng」、「lat」： "：" 41.032169342041 "}、 {" id "：43、" title "：" d "、" lng "：" 28.6649876832962 "、" lat "：" 41.0323740058176 "}];データマーカーが作成されます。それ以外の場合、マーカーは作成されません。 –

obj.lat && obj.lngの内容をphpから確認していますか？あなたがそのコンテンツに警告するなら、それは正しいのですか？ –

私はちょうどjsonデータの結果をGoogleマップに使用する方法を学びたいと思う。私のコードは今働いていません。ページがマップとajaxの両方の読み込みで読み込まれるので、マップ上でjsonデータの結果を使用できません。 –

jsonの結果をGoogleマップに出力

答えて

関連する問題