2011-08-30 65 views
0

使用來自http://gmap.nurtext.de/的jQuery插件gMap。jQuery gMap插件 - >動態構建選項的問題

我不明白爲什麼第一個(註釋掉)調用正確地顯示地圖 但第二個(動態構建)不起作用。第二個顯示地圖,但沒有標記並一路縮小。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title>GMap Test</title> 
    <script src="/assets/js/jquery-1.6.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=My_API_Key"></script> 
    <script type="text/javascript" src="/assets/js/jquery.gmap-1.1.0.js"></script> 
    <script> 
     $(document).ready(function(){ 
     /*  
     $("#course_map").gMap({controls: true, 
           scrollwheel: true, 
           markers: [{latitude: 44.5643, 
              longitude:-88.1033, 
              html: "Radisson/Oneida Casino<br />2040 Airport Drive<br />Green Bay, WI", 
              icon: {image: "/images/gmap_pin_orange.png", 
               iconsize: [26, 46], 
               iconanchor: [12,46], 
               infowindowanchor: [12, 0] 
               } 
             }, 
             {latitude: 44.2674, 
              longitude:-88.4383, 
              html: "Radisson Paper Valley Hotel<br />333 W. College Avenue<br />Appleton, WI", 
              icon: {image: "/images/gmap_pin_orange.png", 
               iconsize: [26, 46], 
               iconanchor: [12,46], 
               infowindowanchor: [12, 0] 
               } 
             } 
             ], 
           zoom: 8 
           } 
          ); 
     */ 

     var markers = 'markers: [{latitude: 44.5643, '+ 
         '   longitude:-88.1033, '+ 
         '   html: "Radisson/Oneida Casino<br />2040 Airport Drive<br />Green Bay, WI", '+ 
         '   icon: {image: "/images/gmap_pin_orange.png", iconsize: [26, 46], '+ 
         '     iconanchor: [12,46], '+ 
         '     infowindowanchor: [12, 0] '+ 
         '     } '+ 
         '   }, '+ 
         '   {latitude: 44.2674, '+ 
         '   longitude:-88.4383, '+ 
         '   html: "Radisson Paper Valley Hotel<br />333 W. College Avenue<br />Appleton, WI", '+ 
         '   icon: {image: "/images/gmap_pin_orange.png", iconsize: [26, 46], '+ 
         '     iconanchor: [12,46], '+ 
         '     infowindowanchor: [12, 0] '+ 
         '     } '+ 
         '   },'; 
     markers = markers.slice(0, -1); 
     markers =  '{controls: true, scrollwheel: true, ' + markers + '], zoom: 8}'; 
     $("#course_map").gMap(markers);     

     });        
    </script> 
    </head> 
    <body> 
    <div id="course_map" style="height:297px; width:380px;border: 2px solid #666;"></div> 
    </body> 
</html> 

任何人都可以幫忙嗎?

回答

0

我建立一個成功的功能標記從Ajax調用是這樣的:

success: function(data) { 
    var markers = { controls: true, scrollwheel: true, markers: [], zoom: 8 }; 
    $.each(data["events"], function(id, event) { 
    // .. do other stuff with the data 
    if(showmap) { 
     // add location to maps list prevent multiples 
     marker1 = { latitude: event['LocLatitude'], 
        longitude:event['LocLongitude'], 
        html: '"'+event['LocName']+'<br />'+event['LocAddress']+'<br />'+event['LocCity']+', '+event['LocState']+'"', 
        icon:{image: "/images/gmap_pin_orange.png", 
         iconsize: [26, 46], 
         iconanchor: [12,46], 
         infowindowanchor: [12, 0] 
         } 
       }; 
     markers.markers.push(marker1); 
    } // if(showmap) 
    } // $.each(data["events"] 
}, // success: 

,然後調用它像這樣:

$("#course_map").gMap(markers);