Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/370.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 每x秒更新谷歌地图上的标记_Javascript_Ajax_Google Maps_Google Maps Api 3 - Fatal编程技术网

Javascript 每x秒更新谷歌地图上的标记

Javascript 每x秒更新谷歌地图上的标记,javascript,ajax,google-maps,google-maps-api-3,Javascript,Ajax,Google Maps,Google Maps Api 3,我试图根据AJAX调用返回的数据,每隔x秒更新google地图上的标记。Ajax函数每x秒调用一次,但没有显示标记。下面是我编写的JavaScript。有人知道原因吗?谢谢 <script type="text/javascript"> var map function initialize() { var mapOptions = { center: new google.maps.LatLng(1.32643, 103.79426),

我试图根据AJAX调用返回的数据,每隔x秒更新google地图上的标记。Ajax函数每x秒调用一次,但没有显示标记。下面是我编写的JavaScript。有人知道原因吗?谢谢

    <script type="text/javascript">
  var map
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(1.32643, 103.79426),
      zoom: 11
    };
  map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }


  google.maps.event.addDomListener(window, 'load', initialize);

        //Ajax call to get position
  function set_center() {
        var feedback = $.ajax({
            type: 'GET',
            url: 'get_gps_position',
          success: function (data) {
            console.log(data);
              if (data['gps_position_longitude'] != null && data['gps_position_latitude'] != null ) {
                var latlng = new google.maps.LatLng(data['gps_position_longitude'], data['gps_position_latitude']);
                var marker = new google.maps.Marker({
                position: latlng, 
                map: map,
                title:"Hello World!"});

              };


        },
        error: function(data) {
            $("#result").html(data);
            console.log(data)
        }
    });
  }

  setInterval(set_center, 10000);

</script>

变量映射
函数初始化(){
变量映射选项={
中心:新google.maps.LatLng(1.32643103.79426),
缩放:11
};
map=new google.maps.map(document.getElementById(“地图画布”),
地图选项);
}
google.maps.event.addDomListener(窗口“加载”,初始化);
//Ajax调用获取位置
函数集_中心(){
var feedback=$.ajax({
键入:“GET”,
url:“获取gps位置”,
成功:功能(数据){
控制台日志(数据);
如果(数据['gps\U位置\U经度]!=null和数据['gps\U位置\U经度]!=null){
var latlng=new google.maps.latlng(数据['gps\u position\u longitude'],数据['gps\u position\u latitude']);
var marker=new google.maps.marker({
位置:latlng,
地图:地图,
标题:“你好,世界!”);
};
},
错误:函数(数据){
$(“#结果”).html(数据);
console.log(数据)
}
});
}
设置间隔(设置中心,10000);

尝试使用javascript向消息发出带有新标记位置的警报,以查看它是否真的在后台得到更新。如果确实如此,那么这与刷新dom或其他相关

假设请求按预期运行并返回有效的JSON:

var latlng = new google.maps.LatLng(data['gps_position_longitude'], data['gps_position_latitude']);
A
google.maps.LatLng
希望参数的顺序为
纬度、经度
,而不是
经度、纬度

此外:与其在每个请求上创建新标记,不如创建一个标记并使用
setPosition()
更新位置

此外:为确保标记在视口内可见,还将地图中心设置为
latlng