Googleマップ - extern jsonの複数のマーカー

Googleマップに複数のマーカーを追加する必要がありますが、データはextern jsonファイルにあります。Googleマップ - extern jsonの複数のマーカー

現時点でイムは今、別のファイルにJSONファイルをエクスクルードしようとしているが、私はそれが仕事を得るカントsadylイムこの

var json = [ 
    { 
    "title": "Stockholm", 
    "lat": 59.3, 
    "lng": 18.1, 
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
    }, 
    { 
    "title": "Oslo", 
    "lat": 59.9, 
    "lng": 10.8, 
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
    }, 
    { 
    "title": "Copenhagen", 
    "lat": 55.7, 
    "lng": 12.6, 
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
    } 
]; 



for (var i = 0, length = json.length; i < length; i++) { 
    var data = json[i], 
     latLng = new google.maps.LatLng(data.lat, data.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    map: map, 
    title: data.title 
    }); 
}

のようにそれを実行している;（

コード

を

$.getJSON("foo.txt", function(json1) { 

}); 


for (var i = 0, length = json.length; i < length; i++) { 
    var data = json[i], 
     latLng = new google.maps.LatLng(data.lat, data.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    map: map, 
    title: data.title 
    }); 
}

foo.txtの

{ 
    "title": "Stockholm", 
    "lat": 59.3, 
    "lng": 18.1, 
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
    }, 
    { 
    "title": "Oslo", 
    "lat": 59.9, 
    "lng": 10.8, 
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
    }, 
    { 
    "title": "Copenhagen", 
    "lat": 55.7, 
    "lng": 12.6, 
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
    }

ご協力ありがとうございます

出典

2013-02-28 Maxi

コードには2つの問題があります。あなたのjsonファイルの先頭に[があり、末尾に]がありません。あなたのjavascriptも間違っています、あなたはgetJSONのコールバックでjsonで何かしたいです。問題のコードは次のとおりです。

$.getJSON("foo.txt", function(json1) { 
    $.each(json1, function(key, data) { 
     var latLng = new google.maps.LatLng(data.lat, data.lng); 
     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: data.title 
     }); 
    }); 
});

EDIT：

ここではgoogle maps tutorialに基づく実施例です。正しいファイルが必要ですfoo.txt：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"> 
    </script> 
    <script type="text/javascript"> 
     var map; 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(58, 16), 
      zoom: 7, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     } 
    </script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $.getJSON("foo.txt", function(json1) { 
      $.each(json1, function(key, data) { 
      var latLng = new google.maps.LatLng(data.lat, data.lng); 
      // Creating a marker and putting it on the map 
      var marker = new google.maps.Marker({ 
       position: latLng, 
       title: data.title 
      }); 
      marker.setMap(map); 
      }); 
     }); 
     }); 
    </script> 
    </body> 
</html>

出典

2013-02-28 20:26:25 halex

おかげで本当に役立っていることの男、：D – Maxi

あなたはこのツールを使用してJSONの構文をチェックすることができます：http： //jsonlint.com/ - これが役に立ったら –

お世話になりました。 – Danish

提供されているHalexの例は私にとっては機能しませんでした。大文字小文字をfoo.txtに追加して配列として宣言し、ブラウザで開くのではなくhtmlファイルにアクセスするためのWebサーバーを実行してソートしました。

私はまた、遅延を追加する必要：

setTimeout(function(){marker.setMap(map);}, 1000);

は、今では見事に動作します！

出典

2017-04-03 14:43:18 mattsnow

のGoogleマップのドキュメントでは、あなたが例を見つけることができます。 https://developers.google.com/maps/documentation/javascript/importing_data

jQueryの必要がない

<div id="map"></div> 
<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: new google.maps.LatLng(2.8,-187.3), 
     mapTypeId: 'terrain' 
    }); 

    // Create a <script> tag and set the USGS URL as the source. 
    var script = document.createElement('script'); 
    // This example uses a local copy of the GeoJSON stored at 
    // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp 
    script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 

    // Loop through the results array and place a marker for each 
    // set of coordinates. 
    window.eqfeed_callback = function(results) { 
    for (var i = 0; i < results.features.length; i++) { 
     var coords = results.features[i].geometry.coordinates; 
     var latLng = new google.maps.LatLng(coords[1],coords[0]); 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map 
     }); 
    } 
    } 
</script>

出典

2017-05-12 14:13:11 rafa226

Googleマップ - extern jsonの複数のマーカー

答えて

関連する問題