Question

我试图在html页面中使用ajax加载gmap但它不起作用

的index.html

<head>    
<script type="text/javascript">      
function load_pages(url) {         
$('#project').html('<p><img src="../images/loader/ajax-loader1.gif" width="100"     height="19" style="margin: 30% auto 0px 30%;"/></p>');                   
$('#project').load(url, "",           
function(responseText, textStatus, XMLHttpRequest) {              
if (textStatus === 'error') {                    
$('#project').html('<p style="margin: 30% auto 0 30%;">Unable to load the content...</p>');               
}            
});       
}
</script>
</head>

<body>
<div id="project">
<a href="javascript:void 0" onclick="load_pages('project-1/location.html');">Location</a>
<p>Here Map Should be load</p>
</div>
</body>

这是Location.html

<div class="map">
<center>                                            
<div id="bd"></div>                                            
<div id="gmap" class="roundtext"></div>                                        
</center> 
</div>

<!-- Map -->                            
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>                            
<script src="../js/map.js"></script>                            
<!-- Map End -->

这是我的map.js 我在我的location.html底部使用的，我也在index.html

中尝试过

var map;
var marker = false;
function initialize() {
    var mLati = 18.546821;
    var mLongi = 73.935998;
    var myLatlng = new google.maps.LatLng(mLati, mLongi);
    var myOptions = {
        zoom: 19,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("gmap"), myOptions);

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });

    google.maps.event.addListener(map, 'center_changed', function() {
        var location = map.getCenter();
        document.getElementById("lat").innerHTML = location.lat();
        document.getElementById("lon").innerHTML = location.lng();
        document.getElementById("frmLat").value = location.lat();
        document.getElementById("frmLon").value = location.lng();
        placeMarker(location);
    });

    google.maps.event.addListener(map, 'zoom_changed', function() {
        zoomLevel = map.getZoom();
        document.getElementById("zoom_level").innerHTML = zoomLevel;
    });

    google.maps.event.addListener(marker, 'dblclick', function() {
        zoomLevel = map.getZoom() + 1;
        if (zoomLevel == 20) {
            zoomLevel = 10;
        }
        document.getElementById("zoom_level").innerHTML = zoomLevel;
        map.setZoom(zoomLevel);
    });

    document.getElementById("zoom_level").innerHTML = 11;
    document.getElementById("lat").innerHTML = 18.546821;
    document.getElementById("lon").innerHTML = 73.935998;
}

function placeMarker(location) {
    var clickedLocation = new google.maps.LatLng(location);
    marker.setPosition(location);
}

window.onload = function() {
    initialize();
};

请帮我解决这个问题

Answer 1

我得到了它，这就是我做的。

在我的脑海中，我添加了jquery库。

<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">   </script>   
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript">      
function load_pages(url) {         
$('#project').html('<p><img src="../images/loader/ajax-loader1.gif" width="100"         height="19" style="margin: 30% auto 0px 30%;"/></p>');                   
 $('#project').load(url, "",           
 function(responseText, textStatus, XMLHttpRequest) {              
 if (textStatus === 'error') {                    
$('#project').html('<p style="margin: 30% auto 0 30%;">Unable to load the content...</p>');               
}            
});       
}
</script>
</head>

然后在map.js文件中，我将window.onload更改为：

$( document ).ready(function() {
initialize();              
});

还为#gmap提供高度和宽度。地图显示..

Answer 2

在Location.html

你有：

<div class="map>

缺少双引号：

<div class="map">

Google地图无法使用ajax加载

2 个答案: