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

Question

我有一个 HAML 文件，它呈现包含地图的部分内容 显示.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=> 上移到显示文件中。但是地图只会在整个页面刷新时加载，但是当我点击提交时，它不会加载，并且 DIV 会在没有地图的情况下显示为白色。

有什么建议吗？谢谢

Answer 1

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

https://github.com/trialbee/assets_ledger

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

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