Question

使用http://gmap.nurtext.de/中的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>

有人可以帮忙吗？

Answer 1

我正在通过像这样的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);

jQuery gMap插件 - >动态构建选项的问题

1 个答案: