2013-04-19 2 views
2

Я пытаюсь сделать api-карту google с маркерами, которые покажут широту и долготу некоторых мест. Я пытаюсь сделать это с помощью json-файла, но он не работает .. вот мой код ..Как я могу прочитать json-данные из json-файла в google map api

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Cluster Map</title> 

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     var map; 
     var markers = []; 

     function initialize() { 
      geocoder = new google.maps.Geocoder(); 
      var center = new google.maps.LatLng(43.474144,-112.03866); 
      map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 7, 
       center: center, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 
      markMultiple(); 
     } 

     function markMap(latLng, content){ 
      var marker = new google.maps.Marker({ 
       position: latLng 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      }); 

      markers.push(marker); 
     } 
     function markMultiple(){ 
      $.parseJSON('test.json', function(data) { 
       $.each(data.markers, function(i, obj) { 
        var latLng = new google.maps.LatLng(obj.lat,obj.lng); 
        var content = obj.id + ':' + obj.lat + ',' + obj.lng; 

        markMap(latLng, content); 
       }); 
      }); 


      var markerCluster = new MarkerClusterer(map, markers); 
     } 



     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id="map-container"> 
     <div id="map"></div> 
    </div> 
</body> 

пожалуйста, помогите мне ..

+3

Вместо '$ .parseJSON', вероятно, вам нужен метод' $ .getJSON'. – Engineer

+0

Правильно ли этот код, я также использовал $ getJSON .. но он не работал. Любой другой способ, который вы знаете ??? – 2013-04-20 06:40:55

+0

Какой результат вы получаете от test.json в браузере? –

ответ

0

Инженер был прав, вам нужно использовать метод $ .getJSON, $ .parseJSON принимает строку JSON , он не загружает внешний файл.

getJSON: http://api.jquery.com/jQuery.getJSON/ parseJSON: http://api.jquery.com/jQuery.parseJSON/

Я положил свой код в jsFiddle и он работает с getJSON и альтернативный тест JSON файл (вы не предоставить оригинал test.json вы используете) ,

$.getJSON('test.json', function(data) { 
       $.each(data.markers, function(i, obj) { 
        var latLng = new google.maps.LatLng(obj.lat,obj.lng); 
        var content = obj.id + ':' + obj.lat + ',' + obj.lng; 

        markMap(latLng, content); 
       }); 
      }); 

http://jsfiddle.net/WYfjv/

Если код не работает, может быть, ваш JSON не хорошо форматируется (попробуйте JSONLINT, чтобы проверить его). Кроме того, если вы уже совершенствуетесь, я бы посоветовал использовать обычный цикл, а не $ .each:

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