2013-06-05 4 views
1

jquery 플러그인 gmap3을 사용하여 텍스트 상자에서 json 배열을 가져 와서 다시 포맷하고 변수를 설정하여 " 마커 : "속성. 단락에 표시 할 값이 있지만 마커 : 값으로 설정할 때 아무 것도 얻지 못합니다.변수에서 Gmap3 마커 값 설정

아래에 jsFiddle을 만들었습니다.

http://jsfiddle.net/ryanverdel/FUmpF/

어떤 도움도 좋은 것입니다.

$(function(){ 

    $("#test").gmap3(); 

    $('#test-ok').click(function(){ 
     //var addr = $('#test-address').val(); 

     $("#display p").empty(); 
     var coordinates = $("#geofenceCoords").val(); 
     var jsonObj = jQuery.parseJSON(coordinates); 


     //if (!addr || !addr.length) return; 

     $("#test").gmap3({ 
     getlatlng:{ 

     //address:addr, 

      callback: function(results){ 

      var markers=[]; 

       $.each(jsonObj, function(i, item) { 
    $('#display p').append('{'+'latLng: '+'['+jsonObj[i].latitude+', '+jsonObj[i].longitude+']'+', options:{icon: "http://www.mindboxdesigns.com/test-images/map_marker.png"}'+'}'+','); 

    markers.push('{'+'latLng: '+'['+jsonObj[i].latitude+', '+jsonObj[i].longitude+']'+', options:{icon: "http://www.mindboxdesigns.com/test-images/map_marker.png"}'+'}'+','); 
}); 


      if (!results) return; 
      $(this).gmap3({ 
       marker:{ 
       //latLng:results[0].geometry.location, 
       values:markers, 
       map:{ 
        center: true, 

       }, 


       }, 
       autofit:{}, 
      }); 
      } 
     } 
     }); 
    }); 

    $('#test-address').keypress(function(e){ 
     if (e.keyCode == 13){ 
     $('#test-ok').click(); 
     } 
    }); 
    }); 

답변

4

나는 gmaps API를 확인하기 위해 코드를 조금 변경되었습니다.

http://jsfiddle.net/y32xY/2/

$("#test").gmap3({ 
    getlatlng:{ 
    //address:addr, 
    callback: function(results){ 
     var markers=[]; 
     $.each(jsonObj, function(i, item) { 
     var marker = new Object(); 
     marker.lat = jsonObj[i].latitude; 
     marker.lng = jsonObj[i].longitude; 
     marker.options = new Object(); 
     marker.options.icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/marker.png"); 
     markers.push(marker); 
     }); 

     $("#test").gmap3({ 
     marker:{ 
      //latLng:results[0].geometry.location, 
      values: markers, 
      options: {draggable: false} 
     }, 
     autofit:{}, 
     }); 
    } 
    } 
}); 

P.S. 코드에서 언급 한 이미지가 404 오류를 생성하므로 기본 Google지도 아이콘을 사용했습니다.

+0

빠른 응답을 보내 주셔서 감사합니다. 그것은 정확히 묻는 방식대로 작동합니다. 그래서 gmaps api에 대해 json 배열을 잘못 반복하고있었습니다. 마커의 속성을 보유 할 범용 개체를 만들었다는 것을 알았습니다. 나는 결코 짐작하지 않았을 것이다. 정말 고맙습니다 – ryan