2016-07-23 100 views
0

我无法加载谷歌地图,而在没有重新加载窗口的情况下在JQuery中使用load()加载新页面的内容。jquery load() - 无法加载谷歌地图

Jquery的Ajax调用:

$("form").submit(function(){ 

     $(".cs-container").load("set-location.php .cs-container"); 
     return false; 

    }); 

我想在当前div.cs-container类元素从另一个set-location.php页面加载的.cs-container内容。它已成功加载,但Google地图不会加载g-maps容器放置在.cs-containerset-location.php页面中,它的脚本文件包含在该页面的头部。

google maps工作得很好,但没有在ajax调用中加载。

当我尝试这样的事:

$("form").submit(function(){ 

      $(".cs-container").load("set-location.php"); 
      return false; 

     }); 

它工作得很好,但它在.cs-container加载整个页面。我不想要。

谷歌地图初始化脚本是(文件cs-loc.js中):

/*check if geolocaiton supported*/ 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
} else { 
    error('Geo Location is not supported'); 
} 




function success(position) { 


    var lat = position.coords.latitude; /*getting cordinates*/ 
    var long = position.coords.longitude; 

    var input = document.getElementById("latLong"); 
    input.value = lat + ", " + long; 

    var poos = new google.maps.LatLng(lat,long); /*set lat long for maps*/ 

    var mapProp = { 
     center: poos, 
     zoom:16, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); /*init maps*/ 

    /*create marker*/ 
    var marker=new google.maps.Marker({ 
     position:poos, 
     title: 'Your Store Location', 
     draggable: true 
     }); 

    marker.setMap(map); /*set marker to map*/ 

    google.maps.event.addListener(marker, 'dragend', function(a) { 
     console.log(a); 
     input.value = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4); 
    }); 


} 


success(); 

如何可以解决?

回答

1

你可以在load()回调

$(".cs-container").load("set-location.php .cs-container", function(){ 
    $.getScript('google.maps....').done(function(){   
      $.getScript('cs-loc.js'); 
    });  
}); 
+0

是什么'地图....'的平均使用$.getScript()? –

+0

谢谢,但它不起作用 –

+0

什么错误被抛出?什么或不会发生? – charlietfl