Ruby使用地图进行部分更新：您已在此页面上多次包含Google Maps API。 这可能会导致意外错误

Question

我有一个HAML文件，可渲染包含地图show.html.haml的部分文件：

      .row
        .col-xs-12
          .panel-group(style="margin-bottom: 0")
            .stat-panel(style="padding: 5px; height:88.89px; margin:0")
              .stat-cell.bg.col-md-1.col-sm-3.col-xs-3
                %i.fa.fa-map-marker.bg-icon.bg-icon-left{:style => "font-size:60px;line-height:80px;height:80px;"}
              .stat-cell.bg.valign-middle(style="padding-left: 40px;")
                Geographic Summary
            .panel.no-border.no-padding
              = render partial: 'map_content', locals: {demographics: @demographics, listicle: @listicle}

_map_content.html.haml部分包含地图：

    .panel-body.no-border.no-padding{:style => "position:relative;height: 600px;"}
      #map-container.widget-maps
        /%script{:src => "assets/javascripts/bootstrap.min.js"}
        /%script{:src => "assets/javascripts/pixel-admin.min.js"}
        /%script{:src => "http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"}
        /%script{:src => "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"}
        /%script{:src => "http://maps.google.com/maps/api/js?sensor=false"}
        :javascript
          var map;
          var markers=[];
          var coord = #{@coordinates};
          var la = #{@current_lat};
          var lo = #{@current_long};
          function setMarkers(locations, lat, lon) {
                  if (coord.length !=0){
                  for (var i = 0; i < locations.length; i++) {
                      var myLatLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
                      var marker = new google.maps.Marker({
                               position: myLatLng,
                               map: map,
                               animation: google.maps.Animation.DROP
                      });
                      markers.push(marker);
                  }}
                      var curLatLong =  new google.maps.LatLng(lat, lon);
                      var current_marker = new google.maps.Marker({
                               position: curLatLong,
                               map: map,
                               animation: google.maps.Animation.DROP,
                               title: 'You are here'
                      });
                      markers.push(current_marker);
          }

      function reloadMarkers() {
               for (var i=0; i<markers.length; i++) {
                   markers[i].setMap(null);
               }
               markers = [];
               setMarkers(coord, la, lo);
      }


      function init_map() {
              var var_mapoptions = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: new google.maps.LatLng(39.5202922,-96.2318707),
                zoom: 5
              }
              map = new google.maps.Map(document.getElementById("map-container"),
                   var_mapoptions);

              setMarkers(coord, la, lo);

              var mc = new MarkerClusterer(map, markers);
              document.getElementById('q-itm').addEventListener('click', reloadMarkers);
      }
    %script{:src=>"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"}

    %script{:src => "https://maps.googleapis.com/maps/api/js?key=AIzaSyCi93_Ajfvl-ZwxPRwqVI98hcqfu2LF3Ic&callback=init_map"}
    :cdata

逻辑是：show.haml还有另一个部分，即“提交”按钮。 用户在该部分中输入信息并单击“提交”后，仅maps_content部分得到更新（而不是整个页面）。 但是，我在控制台中遇到此错误（不过，一切正常，如果有人可能多次单击提交，我只是担心可能出现运行时错误）： 您已在此页面上多次包含Google Maps API 。 这可能会导致意外错误。

我知道发生这种情况是因为在单击“提交”后，src => ...在同一DIV中多次加载。 我试图将src => upper移到显示文件。 但是，地图只会在整个页面上刷新，而我单击“提交”时将不会加载，并且DIV会在没有地图的情况下显示白色。

有什么建议么？ 谢谢

Answer 1

我参与编写了一个小宝石来处理此类问题：

https://github.com/trialbee/assets_ledger

基本思想是，您的分部将其依赖项注册在“分类帐”中，然后布局会询问分类帐应包括哪些依赖项。 由分类帐来确保只将所有依赖项都包含一次。

（最简单的版本是可全局访问的哈希）