Question

我是一个生成地图（GoogleMap）的php文件。如果我独立运行它（http://localhost/domain/map.php）它可以正常运行。

但是当我尝试通过Ajax调用显示它时，它会显示所有map.php内容而不是地图。

$.ajax({            
        type:"post",
        url:"map_generator.php",                
        data:{label1:data1},                    
        success:  function (response) {                 
            $('#map-section').html(response);

        },          
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });

我也尝试过完成＆＃39;功能而不是成功＆＃39;但仍然没有工作。

欢迎所有提示。

谢谢

EDITED

我的map.php

<html>
<head>

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>


<script type="text/javascript">

var coords = [{
0: "45.648110",
1: "11.497398",
2:"Title 1"
}, {
0: "45.511180",
1: "11.511070",
2:"Title 2"
 },{

0: "45.803245",
1: "11.355629",
2:"Title 3"
}];

var geocoder;
var map;

var mapCenter = new google.maps.LatLng(coords [0][0], coords [0][1]);


function initialize() {
//Google map option
        var googleMapOptions = 
        { 
            center: mapCenter, // map center
            zoom: 7, //zoom level, 0 = earth view to higher value
            panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };

        map = new google.maps.Map(document.getElementById("map"), googleMapOptions);

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

        var infowindow = new google.maps.InfoWindow({
            content:"¡Hello World!"
        });

    infowindow.open(map,marker);
    update(coords )
}


function update(markers) {
var infowindow = new google.maps.InfoWindow(),
    marker, i;

    for (i = 0; i < markers.length; i++) {
        var lat = markers[i][0];
        var lng = markers[i][1];    

        var title = markers[i][2];                                  

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,               
            title: title
        });


        google.maps.event.addListener(marker, 'click', (function(marker, lat, lng) {

                    return function() {
                        infowindow.setContent(lat + " " + lng);
                        infowindow.open(map, marker);
                    }
                })(marker, lat, lng));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>                 
<body>

<div class="map" id="map" style="margin:0 auto; width:500px; height:500px; border:1px solid #ff0000">


</body>

</html>

这是调用map.php的文件

 <html>
 <head>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">     </script>
 <script type="text/javascript" src="js/plugins.js"></script>   
 <script type="text/javascript" src="js/informe.js"></script>
 </head>
 <body>
 <a href="javascript:void(0)" onclick="getMap()">Get map</a>
 <div id="map-section" style="position:relative; border:1px solid;width:600px; height:600px;"></div>

 <script>

 function getMap(){ 

$(document).ready(function(){       
    $.ajax({            
        type:"post",
        url:"map.php",              
        data:{region:"algo"},                   
        success:  function (response) {                     
            $('#map-section').html(response);   
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });
}); 
 }

 </script>
 </body>
 </html>

Google Map未在Ajax调用中显示

0 个答案: