自动刷新自定义Google地图内容

时间:2018-08-27 14:10:51

标签: google-maps google-maps-markers

我在网站上实现了自定义的Google地图(在本地运行,因此无法将其链接到该网站),我将其作为数据分析器的前端。该分析器处理数据并返回要用作我的自定义地图上的标记的位置。当分析仪流失时,我需要每秒钟左右更新一次地图,以确保显示新标记并取走旧标记。标记的数据存储在MySQL数据库中,并使用PHP进行检索。我有一个函数(get_markers),它为每个位置的数据返回一个数组。这是Google地图用于标记的格式:[['Fire',1,1,238],['Hurricane',18.0848456,-77.215729455,236]]。

另一个PHP函数(get_markers_byid)用于从数据库返回标记的ID,以检查是否有任何新的标记。

目前,我的代码返回了当前标记,但似乎并没有像我需要的那样刷新自身。

任何帮助都会很棒!

P.S。我还需要向地图添加一个热图图层,其操作方式相同。关于此的任何想法也将非常有帮助!

<script>
            var map;
            var markers = [];
            var markersID = [];
            var heatmap;
            function initMap() 
            {
                map = new google.maps.Map(document.getElementById('map'), 
                {
                    zoom: 2.5,
                    center: {lat: 0, lng: 0},
                    mapTypeId: 'satellite'
                });

                addmarkers();
            }

            //add markers to the map
            function addmarkers()
            {                   
                var locations = [<?php echo $db->get_markers(); ?>];
                markersID = [<?php echo $db->get_markers_byid(); ?>];

                var marker, i, mylatlng, info;

                for(i = 0; i < locations.length; i++)
                {
                    info = locations[i][0]  + " - Event ID: " + locations[i][3];                    

                    mylatlng = {lat: locations[i][1], lng: locations[i][2]};
                    marker = new google.maps.Marker({
                        position: mylatlng,
                        map: map,
                        title: info
                    });
                    markers.push(marker);
                }
                setMapOnAll(map);
            }

            //check all the markers by their ID currently shown to the current state of database to see if an update is needed
            function checkmarkers()
            {
                var newmarkers = [<?php echo $db->get_markers_byid(); ?>];
                var newmarker = false;
                var seen = false;
                var lengthchange = false;

                if(markersID.length != newmarkers.length)
                {
                    lengthchange = true;
                }

                if(lengthchange == false)
                {
                    for(i = 0; i < markersID.length; i++)
                    {
                        seen = false;
                        for(j = 0; j < newmarkers.length; j++)
                        {
                            if(markersID[i] == newmarkers[j])
                            {
                                seen = true;
                            }
                        }

                        if(seen == false)
                        {
                            newmarker = true;
                            break;
                        }
                    }
                }

                if(newmarker == true || lengthchange == true)
                {
                    clearMarkers();
                    deleteMarkers();
                    addmarkers();
                }
            }

            function clearMarkers() 
            {
                setMapOnAll(null);
            }

            function deleteMarkers() 
            {
                clearMarkers();
                markers = [];
            }                       

            function setMapOnAll(map) 
            {
                for (var i = 0; i < markers.length; i++) 
                {
                    markers[i].setMap(map);
                }
            }

            /*function addheat()
            {                   
                heatmap.setMap(null);
                heatmap = new google.maps.visualization.HeatmapLayer({
                    data: getPoints(),
                    map: map
                });
            }

            function getPoints()
            {
                return [ <?php echo $db->get_map(); ?> ];
            }*/

            function populatemap()
            {
                checkmarkers();
            }
            setInterval(populatemap,1000);
        </script>

0 个答案:

没有答案