地图标记刷新/更新而不刷新整个地图

Map Marker refresh/Update without refreshing whole map

本文关键字：刷新 地图 图标 更新      更新时间：2023-09-26

我不知道如何编辑它，这样地图就不会刷新，但它会继续刷新标记以获得更新的位置。

职位来自这条线路

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

就在那里

<?php
$json_pos = file_get_contents("C:'Users'KLAUS'Desktop'New'This SAMP'scriptfiles'positions.json");
     ?>
<!DOCTYPE html>
 <html>
<head>
    <meta http-equiv="refresh" content="1" />
    <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">
        var p_pos = <?php echo (empty($json_pos)) ? "" : $json_pos ?>;
        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
        });
        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
        });
        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(p_pos !== "")
        {
            for (var i = 0; i < Object.keys(p_pos).length; i++) 
            {
                if(p_pos[i].online == 1) createMarker(i); 
            }
        }   
        google.maps.event.addListener(map, 'click', function(event) {
            var pos = SanMap.getPosFromLatLng(event.latLng);
            console.log(pos.x + "," + pos.y);
        }); 
        function createMarker(id)
        {
            var p_windows = new google.maps.InfoWindow({
                content: "<p>"+p_pos[id].name+" <b>(ID: "+id+")</b><br>Ping: "+p_pos[id].ping+"</p>"
            });
            var p_marker = new google.maps.Marker({
                position: SanMap.getLatLngFromPos(p_pos[id].x, p_pos[id].y),
                map: map,
                icon: "images/marker.png"
            });
            google.maps.event.addListener(p_marker, 'click', function() {
                p_windows.open(map,p_marker);
            });
        }
    </script>
</body>

删除顶部标题行：<meta http-equiv="refresh" content="1" />以禁用刷新页面。然后在回调中添加一个setInterval函数来从php服务获取新数据——

  1. 首先使用marker.setMap（null）清除上一个标记，然后调用CreateMarker（id）

或

  1. 您可以编写updateMarker（id）函数，并使用marker.setPosition()来更新位置

这些通常是您实现自己的代码的想法。

相关文章：