Google Maps - Nhiều điểm đánh dấu từ extern json

Tôi phải thêm nhiều điểm đánh dấu vào bản đồ google, nhưng dữ liệu nằm trong tệp json bên ngoài.Google Maps - Nhiều điểm đánh dấu từ extern json

Tại thời điểm này Im chạy nó như thế này

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 
    }); 
}

Bây giờ im cố gắng để exlude File Json vào một tập tin khác, nhưng sadyl tôi không thể có được nó để làm việc; (

Mã

$.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)." 
    }

Cảm ơn sự giúp đỡ của bạn

Nguồn

2013-02-28 Maxi

Có hai vấn đề trong mã của bạn. Tệp json của bạn bỏ lỡ số [ ở đầu và ] ở cuối. Javascript của bạn là sai quá, bạn muốn làm một cái gì đó với các json trong gọi lại của getJSON. Các mã cho vấn đề của bạn là:

$.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:

Dưới đây là một ví dụ làm việc dựa trên google maps tutorial. Bạn cần tệp chính xác 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>

Nguồn

2013-02-28 20:26:25 halex

nhờ người đàn ông, đó thực sự giúp: D – Maxi

Bạn có thể kiểm tra cú pháp JSON với công cụ này: http: //jsonlint.com/ - hy vọng điều này sẽ giúp –

cảm ơn bạn, nó hoạt động mà không có bất kỳ rắc rối hoặc bất kỳ thay đổi nào! – Danish

Ví dụ halex được cung cấp không có tác dụng đối với tôi. Tôi đã sắp xếp nó ra bằng cách thêm dấu ngoặc vuông vào foo.txt để khai báo nó dưới dạng mảng và chạy máy chủ web để truy cập tệp html, thay vì chỉ mở nó trong trình duyệt.

tôi cũng cần thêm một sự chậm trễ:

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

Bây giờ nó hoạt động rất đẹp!

Nguồn

2017-04-03 14:43:18 mattsnow

Trong tài liệu bản đồ của Google, bạn có thể tìm thấy một ví dụ: https://developers.google.com/maps/documentation/javascript/importing_data

JQuery không cần thiết

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

Nguồn

2017-05-12 14:13:11 rafa226

Google Maps - Nhiều điểm đánh dấu từ extern json

Trả lời

Các vấn đề liên quan