javascript - Ruby 使用 map 更新部分内容 : You have included the Google Maps API multiple times on this page. 这可能会导致意外错误

Question

我有一个 HAML 文件，它渲染包含 map 的部分内容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 包含 map :

    .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 移动到显示文件。但是， map 只会在整个页面刷新时加载，但是当我单击“提交”时，它不会加载，并且 DIV 在没有 map 的情况下呈白色。

有什么建议吗？谢谢

Answer 1

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

https://github.com/trialbee/assets_ledger

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

(最简单的版本是全局可访问的哈希)