Question

我使用Google Maps V3显示一些图钉。我希望能够刷新标记，而不会影响您在地图或缩放级别上的位置。我希望标记每10分钟更新一次。

我该怎么做呢？我对jQuery / ajax没有那么多经验。

我的地图的一个工作示例如下。

<script type="text/javascript">
    function initialize() {

        var locations = [


            <? php

            $count = count($cd);
            for ($i = 0; $i < $count; $i++) {

                $then = $cd[$i][6];

                $now = time();


                $difference = $now - $then;


                $time_diff = floor($difference / 60);


                if ($time_diff < 2) {
                    $before_time = 'green';
                }
                if ($time_diff > 2 and $time_diff < 4) {
                    $before_time = 'yellow';
                }
                if ($time_diff > 4) {
                    $before_time = 'Red';
                }



                if (!empty($cd[$i][4])) {
                    if (!empty($cd[$i][5])) {



                        print '["'.$cd[$i][1].
                        '", '.$cd[$i][4].
                        ', '.$cd[$i][5].
                        ','.$count.
                        ',"'.$before_time.
                        '","'.$cd[$i][3].
                        '","'.$time_diff.
                        '"]';
                    }
                }


                if ($i < ($count - 1)) {

                    if (!empty($cd[$i][4])) {
                        if (!empty($cd[$i][5])) {

                            echo ', ';


                        }
                    }
                }
            }


            ?>



        ];
        window.map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var bounds = new google.maps.LatLngBounds();

        for (i = 0; i < locations.length; i++) {



            if (locations[i][4] == "green") {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    icon: "http://any.com/markar/green.png",
                    map: map
                });
            }
            if (locations[i][4] == "yellow") {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    icon: "http://any.com/markar/pin-yellow.png",
                    map: map
                });
            }

            if (locations[i][4] == "Red") {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    icon: "http://any.com/markar/pin-red.png",
                    map: map
                });
            }




            bounds.extend(marker.position);


            var boxText = document.createElement("div");
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = marker.html;

            var myOptions = {
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, 0),
                zIndex: null,
                boxStyle: {
                    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat",
                    opacity: 0.75,
                    width: "280px"
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };



            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {


                    infowindow.setContent('<div class="info"><p>Username :  <b>' + locations[i][0] + '</b></p><p>Full Name  : <b>' + locations[i][5] + '</b></p><p>Last Update : <b>' + locations[i][6] + '</b> Munte ago</p></div>');



                    infowindow.open(map, marker);
                }
            })(marker, i));



        }




        map.fitBounds(bounds);

        var listener = google.maps.event.addListener(map, "idle", function() {
            map.setZoom(7);
            google.maps.event.removeListener(listener);
        });
    }

    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>

此处位置数据锥体来自php代码

Answer 1

setTimeout ( "setMapContent()", 2000 );// you can change this value according to your requirement.

function setMapContent(){
$.ajax({url:"your url to get latest data",success:function(result){

// load map part with new values using result without refreshing the page
  }});

}

尝试实现这一点。

每10分钟刷新谷歌地图标记，无需刷新页面

1 个答案: