我需要帮助创建一个带有移动标记的地图(根据纬度和长仓)

时间:2016-11-15 07:51:11

标签: javascript angularjs google-maps google-maps-api-3

我正在使用API​​来获取直播和经度位置。我想显示一个带有平滑移动标记和信息窗口的地图。我使用ajax来获取数据,我也使用了setinterval。但问题是5秒后它会使地图​​闪烁,然后它会改变它的位置。我想要一个带有轨道的平滑移动标记的地图。我甚至做了很多研究 - 但我无法得到准确的结果。我甚至使用过Angularjs - 但它没有成功。

如果有人可以帮我解决这个问题,我会非常感激。

这是我的代码:

setInterval(function addMarker1()
{

    $.ajax({
        url: "<?php echo base_url('welcome/ajax_map');?>",
        type: "POST",
        data: {},
        dataType: "json",
        success: function(response){
            $(response).each(function(key,value)
                    {
                if(key==0)
                {
                    var mapCanvas = document.getElementById("map");
                    var res = value.split(",");
                    /* alert(res[0]);
                                        alert(res[1]); */
                    var mapOptions = {
                            center: new google.maps.LatLng(res[0],res[1]), 
                            zoom: 16,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(mapCanvas, mapOptions);
                    var marker = new google.maps.Marker({
                        position: value,
                        icon: 'http://58.254.202.73/808gps/ttxmap/google/image/1/online/1.png',
                        map: map
                    }); 

                    var latlng = new google.maps.LatLng(res[0],res[1]);
                    marker.setPosition(latlng);

                    var contentString = '<div id="content">'+
                            '<div><strong><span id="1"></span></strong></div>'+
                            '<div><strong>position: </strong><span id="0"></span></div>'+
                            '<div><strong>Time: </strong><span id="2"></span></div>'+
                            '<div><strong>Mileage: </strong><span id="3"></span></div>'+
                            '<div><strong>Speed: </strong><span id="4"></span></div>'+
                            '</div>';

                    var infowindow = new google.maps.InfoWindow({              //information window
                        content: contentString
                    });

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

        }
    }); 


},500);
addMarker1(); 

0 个答案:

没有答案