个人中心
gpt4 book ai didi

javascript - 谷歌地图 api 无法加载 ajax 请求

转载 作者：行者123 更新时间：2023-11-30 00:11:42 24 4
gpt4 key购买 nike

我写了一个代码段来在谷歌地图上绘制折线作为动画。它工作得很好。但是当我尝试通过 ajax 请求调用该代码段时，它不起作用。没有错误。请帮助我找出问题所在。

这是 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>

这是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>

最佳答案

尝试在 jQuery("#load_map_div").html(data) 之后调用 initialize()，如下所示:

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

关于javascript - 谷歌地图 api 无法加载 ajax 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36213786/

24 4 0
文章推荐： javascript - 绑定(bind)实例方法与包装在匿名函数中
文章推荐： android - 如何显示 Location.distanceBetween 的结果
文章推荐： javascript - 从 JavaScript 代码中获取 token
文章推荐： javascript - 如何将 JSON 数组数据从一个 JS 函数发送到另一个？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com