Question

我正在尝试整合一个有一点ajax的Rails应用程序。问题是调用页面加载的ajax部分没有显示谷歌地图。其他所有内容都在页面上，但不包括Google地图。

当我点击刷新时，带有地图的页面会按原样加载，但从那时起，当我点击链接时，地图就会丢失 - 即使页面中的其他内容都在那里。

包含我的地图的脚本甚至没有加载。我的意思是当我在脚本标签之间放置console.log（“hello”）时，'hello'没有出现在我的控制台中。当我刷新页面时它会出现，但在使用ajax链接时却不会出现。

有谁知道为什么，或者有一些代码来帮助我？我试过了：

$(document).ready(function(){
google.maps.event.trigger(map, 'resize');
});

位于我的show.html.erb的顶部，但无法使其正常运行。如果有任何帮助，我的地图脚本的代码是：

  <div id="map_canvas">


<script type="text/javascript">
console.log("hello") 
  var map;
  var markers = [];

  function initialize_google_maps() {
    var currentlatlng = new google.maps.LatLng(<%= @user.lat %>, <%= @user.lng %>);
    var zoom = <%= @kms_range %> > 9 ? 9 : 10;
    var myOptions = {
        zoom: zoom,
        center: currentlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({map: map, position: currentlatlng, icon:{oppacity:0}});
    map.setCenter(currentlatlng);
    map.setZoom(zoom);

    var circle = new google.maps.Circle({
        map: map,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeOpacity: 0.7,
        radius: <%= @kms_range %>*1000,
    });
    circle.bindTo('center', marker, 'position');

  }

  function show_markers() {
    if (markers)
      for(i in markers) {
        markers[i].setMap(map);
      }
  }

  function add_marker(location) {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
    // markers.setVisible(false);
  }

  function initialize_markers() {
    <% (@reviews || []).each do |r| %>
      <% next unless r.lat && r.lng %>
      position = new google.maps.LatLng(<%= r.lat %>, <%= r.lng %>);
      add_marker(position);
    <% end %>
  }

  $(function() {
    initialize_google_maps();
    initialize_markers();
    show_markers();
  });

</script>

    </div>

我的Ajax代码是：

$(document).on("ready", function(){

    var ajax_loaded = (function(response) {             

        $(".page-content")

            .html($(response).filter(".page-content"));             

        $(".page-content .ajax").on("click",ajax_load); 


});

var form_submit = (function(e) {                    
    e.preventDefault();                             

    var url = $(this).attr("action");               
    var method = $(this).attr("method");            


    var data = {}                                   
    $(this).find("input, textarea, select").each(function(i){
        var name = $(this).attr("name");            
        var value = $(this).val();                  

        data[name] =value;                          

    }); 

    $.ajax({                                        
        "url": url,                                 
        "type": method,                             
        "data": data,                               
        "success": ajax_loaded,
        "error": function () {alert("bad");}        
    });
});


var history = [];                                   

var current_url_method;                             

var ajax_load = (function(e) {                      
    e.preventDefault();                             


    history.push(this);                             

    var url =$(this).attr("href");                  
    var method = $(this).attr("data-method");       

    if (current_url_method != url + method) {       
        current_url_method = url + method;          

        $.ajax({                                    
            "url": url,                             
            "type": method,                         
            "success": ajax_loaded,                 
        });
     }
});

$("#menu a").on("click",ajax_load);

$("#menu a.main").trigger("click");
$(".search-box form").on("submit", form_submit);


});

Answer 1

你解决了这个问题吗？我之前有同样的问题（地图不是由ajax加载页面显示）但我的问题是因为我没有给出正确的lat和lng

也许你会确保你的代码值正确

var myOptions = {
        zoom: zoom,<br>
        center: currentlatlng,<br>
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID<br>
        streetViewControl: false<br>
    };

和

设置您的div宽度和高度，如＜div id="map_canvas" style＝＂width:800px＂ height:450px"＞＜／div＞

我记得谷歌地图需要宽度和高度

Google地图未在ajax中加载

1 个答案: