Question

我有一个HAML文件，它渲染包含map的partial 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有另一个部分，它有Submit按钮。用户在该部分中输入信息并单击“提交”后，只会更新maps_content部分（而不是整个页面）。但是，我在控制台中收到此错误（但是，一切正常，我只是害怕可能的运行时错误，如果有人可能会点击提交多次）： 您已在此页面上多次添加Google Maps API。这可能会导致意外错误。

我理解这是因为src =＆gt; ...在点击提交后在同一个DIV中多次加载。我试图移动src =＆gt;上，到show文件。但是地图只会在整个页面刷新时加载，但是当我点击提交时，它不会加载而DIV在没有地图的情况下显示为白色。

有什么建议吗？谢谢

Answer 1

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

https://github.com/trialbee/assets_ledger

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

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

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

1 个答案: