Добавление нескольких маркеров в Google Maps V3 с помощью Json - PullRequest
Новая
       15

Добавление нескольких маркеров в Google Maps V3 с помощью Json

1 голос
/ 20 марта 2012

Я пытаюсь адаптировать свой код с помощью JSON в Google Maps.Я пытался посмотреть на другие потоки stackoverflow, но мне не помогло.Как мне показать несколько точек на карте с координатами, которые получает json?Этот код в firebug не показывает ошибок, и карта отображается синим цветом. 

var geocoder;
var map;

function initialize() {  

var url = '/project/display/get_coordinates/';

$.getJSON(url, function(data) {

$.each(data, function(index, c) {   

//alert(c.fields['lat']+','+c.fields['lng']); result: -23.0522826,-43.32745712

//Map
latlng = new google.maps.LatLng(c.fields['lat']+','+c.fields['lng']);  

//options
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};   

//get the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//marker
var marker = new google.maps.Marker({
  map: map,
  position: latlng,
  //title: {{i.display.codigo}}          
});

//infowindow
var infowindow = new google.maps.InfoWindow({
   content: 'oi'
});

//click infowindow
google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map, marker);
});


});//close each

});//close getjson

}//close initialize

Мой ответ в Json: 

[{"pk": 1, "model": "address.coordinates", "fields": {"lat": "-23.0522826", "lng": "-43.32745712"}}, {"pk": 2, "model": "address.coordinates", "fields": {"lat": "-22.24569326", "lng": "-43.7028948"}}]

Спасибо!

1 Ответ

0 голосов
/ 20 марта 2012

У вас есть 1 реальная ошибка здесь: 

latlng = new google.maps.LatLng(c.fields['lat']+','+c.fields['lng']);

google.maps.LatLng ожидает 2 параметра (lat & lng), но вы указываете 1 (строка, содержащая lat и lng, объединенные запятой). Должно быть 

latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']);

Но у вас также есть логическая ошибка:

Вы перезаписываете последнюю карту, созданную в каждом цикле

Создать карту и информационное окно вне $ .each () 

function initialize() 
{  
  var myOptions = 
      {
        zoom: 5,
        center: new google.maps.LatLng(1,1) ,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: true
      }; 

   var url = '/project/display/get_coordinates/';


  $.getJSON(url, function(data) {

    map= new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var bounds=new google.maps.LatLngBounds();
    infowindow = new google.maps.InfoWindow({
                    content: 'oi'
                  });

    $.each(data, function(index, c) {   

      var latlng = new google.maps.LatLng(c.fields['lat'],c.fields['lng']); 

      var marker = new google.maps.Marker({
                      map: map,
                      position: latlng,
                      title:'pk:'+c.pk
                  });
      bounds.extend(latlng);

      google.maps.event.addListener(marker, 'click', function() {
          infowindow.close();
          infowindow.setContent('pk:'+c.pk);
          infowindow.open(map, marker);
      });


});//close each
map.fitBounds(bounds);
});//close getjson

}//close initialize
...