谷歌地图 api 无法在 ajax 请求上加载

Question

I wrote a code segment to draw poly-line on the google map as an animation.我写了一个代码段来在谷歌地图上绘制折线作为动画。 It works perfectly.它完美地工作。 But when I try to call that code segment through an ajax request, it is not working.但是当我尝试通过 ajax 请求调用该代码段时，它不起作用。 There are no errors.没有错误。 Please help me to find that what is going wrong.请帮我找出问题所在。

This is index.php file.这是 index.php 文件。

<!DOCTYPE html>
<html>
<head>
<title>Animated route</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
    html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
    }
</style>

<script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=geometry"></script>
</head>
<body>
<input type="button" id="button" value="View map"   />
<div id="load_map_div" >
<div id="map_loading_img" >
<img src="../images/map_loader.gif" title="loading"  />
</div>
</div>
</body>
</html>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){

jQuery("#map_loading_img").hide();
jQuery("#button").click(function () {

jQuery("#map_loading_img").show();
jQuery.ajax({
url: 'ajax.php',
type: 'POST',
success: function (data) {

jQuery("#map_loading_img").hide();
jQuery("#load_map_div").html(data);

}
});
});
});

</script>

This is ajax.php page这是 ajax.php 页面

    <div id="map"></div>
    <?php include "db_connect.php";

            $query = mysql_query("SELECT * FROM temperature_details");
            $firstrow = mysql_fetch_assoc($query);

            // reset the result resource
            mysql_data_seek($query, 0);
            $pathCoords = array();

            while($row = mysql_fetch_assoc($query)){
                $pathCoords[] = $row;
            }
            $json_array = json_encode($pathCoords);



    ?>

    <script>
        function initialize() {
            var map = new google.maps.Map(document.getElementById("map"), {
              center: {lat: <?php echo $firstrow['latitude'].', lng:'. $firstrow['longitude']?>},
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            autoRefresh(map);
        }

        function moveMarker(map, marker, latlng,mac,date,Temperature,speed) {
            marker.setPosition(latlng);
            map.panTo(latlng);

             var contentString = '<div id="content">'+
      '<div id="bodyContent">'+
      '<p><b>Mac Address. ' + mac + ' Date & Time. ' + date + '</b><br/> Temperature. ' + Temperature + ' Speed. ' + speed +
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

            var marker2 = new google.maps.Marker({
                position: latlng,
                //icon:"http://localhost/tempMap/img/001.png",
                map: map,
                title: Temperature
            });

            marker2.addListener('click', function() {
                infowindow.open(map, marker2);
                 });

        }

        function autoRefresh(map) {
            var i, route, marker;

            /*var lineSymbol = {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 4,
                strokeColor: '#393'
            };*/
            var iconsetngs = {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
            };

            route = new google.maps.Polyline({
                path: [],
                icons: [{
                    icon: iconsetngs,
                    repeat:'35px',
                    offset: '100%'}],
                geodesic : true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2,
                editable: false,
                map:map
            });

            marker = new google.maps.Marker({map:map,icon:"http://localhost/tempMap/img/firetruck.png"});
            for (i = 0; i < pathCoords.length; i++) {
                setTimeout(function (coords)
                {
                    var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
                    var mac =coords.unit_mac;
                    var Temperature = coords.temperature;
                    var date = coords.date_time;
                    var speed = coords.speed;
                    route.getPath().push(latlng);
                    moveMarker(map, marker, latlng,mac,date,Temperature,speed);

                }, 200 * i, pathCoords[i]);


            }
            animateCircle(route); 
        }
        function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

        google.maps.event.addDomListener(window, 'load', initialize);
        var pathCoords = <?php echo $json_array; ?>;
        console.log(pathCoords);

    </script>

Answer 1

Try invoking initialize() after jQuery("#load_map_div").html(data) as below:尝试在 jQuery("#load_map_div").html(data) 之后调用 initialize() 如下：

success: function (data) {
 jQuery("#map_loading_img").hide();
 jQuery("#load_map_div").html(data);
 initialize();
}

谷歌地图 api 无法在 ajax 请求上加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-25 08:41:22

谷歌地图 api 无法在 ajax 请求上加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-25 08:41:22

解决方案1
1 已采纳 2016-03-25 08:41:22