更新标记而不刷新整个 MAP/页面答案

【问题标题】：Update Markers without refreshing entire MAP/Page更新标记而不刷新整个 MAP/页面
【发布时间】：2016-02-17 23:54:34
【问题描述】：

好的，我知道了。

<?php

                $json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
            ?>

            <!DOCTYPE html>
            <html>
                <head>

                    <title>SA:MP live map</title>
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <style type="text/css">
                        #map-canvas { display: inline-block; height: 800px; width: 800px; }
                        #map-legend { padding: 10px; background-color: rgba(141, 142, 127, 0.46);}
                    </style>
                </head>

                <body>
                    <div id="map-canvas"></div>

                    <script src="js/SanMap.min.js"></script>
                    <script type="text/javascript">


                        // POISION DATA

                        var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;




                        // MAP TYPE

                        var mapType = new SanMapType(0, 1, function (zoom, x, y) {
                            return x == -1 && y == -1 
                            ? "images/tiles/map.outer.png" 
                            : "images/tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
                        });

                        // SAT TYPE

                        var satType = new SanMapType(0, 3, function (zoom, x, y) {
                            return x == -1 && y == -1 
                            ? null 
                            : "images/tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
                        });

                        // CREATE MAP

                        var map = SanMap.createMap(document.getElementById('map-canvas'), 
                            {'Map': mapType, 'Satellite': satType}, 2, SanMap.getLatLngFromPos(0,0), false, 'Satellite');

                        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('map-legend'));


                        // IF ONLINE THEN DO FUNCTION CREATE MARKER

                        if(p_pos !== "")
                        {
                            for (var i = 0; i < Object.keys(p_pos).length; i++) 
                            {
                                if(p_pos[i].online == 1) createMarker(i);
                            }
                        }










                    // MAKRER FUNCTION

                        function createMarker(id)
                        {




                            var p_marker = new google.maps.Marker({
                                position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
                                map: map,
                                icon: "images/marker.png"
                            });


                        }

                            function updateMarker(id)
                        {
                            p_marker.setMap(null);
                            p_marker.setPosition(SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y))

                        }


                        setInterval(function()
                            { "updateMarker" }, 1000);



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

使用它可以，但我必须刷新页面才能看到更新的标记位置。我想要做的是让标记每秒更新一次，而无需刷新整个页面/地图

我将它添加到底部，认为它会起作用

    function updateMarker(id)
                        {
                            p_marker.setMap(null);
                            p_marker.setPosition(SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y))

                        }


                        setInterval(function()
                            { "updateMarker" }, 1000);

所以我现在的总页数是这个

                <?php

                $json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
            ?>

            <!DOCTYPE html>
            <html>
                <head>

                    <title>SA:MP live map</title>
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <style type="text/css">
                        #map-canvas { display: inline-block; height: 800px; width: 800px; }
                        #map-legend { padding: 10px; background-color: rgba(141, 142, 127, 0.46);}
                    </style>
                </head>

                <body>
                    <div id="map-canvas"></div>

                    <script src="js/SanMap.min.js"></script>
                    <script type="text/javascript">


                        // POISION DATA

                        var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;




                        // MAP TYPE

                        var mapType = new SanMapType(0, 1, function (zoom, x, y) {
                            return x == -1 && y == -1 
                            ? "images/tiles/map.outer.png" 
                            : "images/tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
                        });

                        // SAT TYPE

                        var satType = new SanMapType(0, 3, function (zoom, x, y) {
                            return x == -1 && y == -1 
                            ? null 
                            : "images/tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
                        });

                        // CREATE MAP

                        var map = SanMap.createMap(document.getElementById('map-canvas'), 
                            {'Map': mapType, 'Satellite': satType}, 2, SanMap.getLatLngFromPos(0,0), false, 'Satellite');

                        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('map-legend'));


                        // IF ONLINE THEN DO FUNCTION CREATE MARKER

                        if(p_pos !== "")
                        {
                            for (var i = 0; i < Object.keys(p_pos).length; i++) 
                            {
                                if(p_pos[i].online == 1) createMarker(i);
                            }
                        }










                    // MAKRER FUNCTION

                        function createMarker(id)
                        {




                            var p_marker = new google.maps.Marker({
                                position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
                                map: map,
                                icon: "images/marker.png"
                            });


                        }

                            function updateMarker(id)
                        {
                            p_marker.setMap(null);
                            p_marker.setPosition(SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y))

                        }


                        setInterval(function()
                            { "updateMarker" }, 1000);



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

但还是一样，我必须刷新页面才能看到更新后的标记位置。

我很迷茫。我有正确的想法吗？我把这些放在错误的顺序吗？请帮帮我

【问题讨论】：

标签： javascript php

【解决方案1】：

你确定setInterval() func 的实现（你的语法有错误）？

试试setInterval(updateMarker, 1000);

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

另外重点是使用AJAX：

$(document).ready(function(){
                         setInterval(function(){
                            $.getJSON('C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json', function(data) {
                                //alert(data); //uncomment this for debug
                                p_pos = data;
                                for (var i = 0; i < Object.keys(p_pos).length; i++)  updateMarker(i);

                            });
                        }, 1000);
                    });

http://api.jquery.com/jquery.getjson/

     <?php

                $json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");
            ?>

            <!DOCTYPE html>
            <html>
                <head>

                    <title>SA:MP live map</title>
                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
                    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <style type="text/css">
                        #map-canvas { display: inline-block; height: 800px; width: 800px; }
                        #map-legend { padding: 10px; background-color: rgba(141, 142, 127, 0.46);}
                    </style>
                </head>

                <body>
                    <div id="map-canvas"></div>

                    <script src="js/SanMap.min.js"></script>
                    <script type="text/javascript">


                        // POISION DATA

                        var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;




                        // MAP TYPE

                        var mapType = new SanMapType(0, 1, function (zoom, x, y) {
                            return x == -1 && y == -1 
                            ? "images/tiles/map.outer.png" 
                            : "images/tiles/map." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
                        });

                        // SAT TYPE

                        var satType = new SanMapType(0, 3, function (zoom, x, y) {
                            return x == -1 && y == -1 
                            ? null 
                            : "images/tiles/sat." + zoom + "." + x + "." + y + ".png";//Where the tiles are located
                        });

                        // CREATE MAP

                        var map = SanMap.createMap(document.getElementById('map-canvas'), 
                            {'Map': mapType, 'Satellite': satType}, 2, SanMap.getLatLngFromPos(0,0), false, 'Satellite');

                        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('map-legend'));


                        // IF ONLINE THEN DO FUNCTION CREATE MARKER

                        if(p_pos !== "")
                        {
                            for (var i = 0; i < Object.keys(p_pos).length; i++) 
                            {
                                if(p_pos[i].online == 1) createMarker(i);
                            }
                        }










                    // MAKRER FUNCTION
 var p_marker = new Array();// just global array of markers
                        function createMarker(id){

                            p_marker[id] = new google.maps.Marker({ // initializing p_marker array of markers
                                position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
                                map: map,
                                icon: "images/marker.png"
                            });


                        }

                            function updateMarker(id, pos){
                            p_marker[id].setMap(null);// now it's global, so we can access it from here
                            p_marker[id].setPosition(SanMap.getLatLngFromPos(pos.x, pos.y))

                        }


                        $(document).ready(function(){
                             setInterval(function(){
                                $.getJSON('C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json', function(data) {
                                    //alert(data); //uncomment this for debug
                                    p_pos = data;
                                    for (var i = 0; i < Object.keys(p_pos).length; i++)  updateMarker(i, p_pos[i]);

                                });
                            }, 1000);
                        });



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

【讨论】：

把它改成你说的那样，但在我手动刷新页面之前仍然没有更新标记
另外你应该使用 AJAX 来获取位置。一定要使用 jQuery
我以为你会使用我的代码？不要写完全不同的东西
我的控制器在同一个文件中，阅读代码的开头。 $json_pos = file_get_contents("C:\Users\KLAUS\Desktop\New\This SAMP\scriptfiles\positions.json");这就是我的位置。
现在更加混乱了。