[ROS]在Google地圖上即時顯示GPS 的軌跡(2/2) — 繪製在地圖上
如題，目標是播放ROSbag，並接收ROSbag發布的訊息，在Google地圖上即時顯示GPS 的軌跡。要達到這點，要在JavaScript這端能接收到ROS的訊息，並更新軌跡，繪製在地圖上。

在前一篇中介紹了如何串接ROS端和JavaScript端

接著，這一篇會是接收ROSbag播放時的GPS訊息並繪製在地圖上。

一、接收GPS訊息

我們從上一篇roslib的tutorial (http://wiki.ros.org/roslibjs/Tutorials/BasicRosFunctionality)來改。關於連線的部分保留，改動callback function的觸發時機和內容。 新的callback function應該長類似這樣。

var gps_listener = new ROSLIB.Topic({

ros : ros,

name : '/running_gps',

messageType : 'sensor_msgs/NavSatFix'

});



gps_listener.subscribe(function(msg) {

console.log('Received message on ' + gps_listener.name + ': ' + msg.longitude + " " + msg.latitude);

document.getElementById('longitude').innerHTML = msg.longitude

document.getElementById('latitude').innerHTML = msg.latitude

});

主要就是要subscribe的topic名稱、類型變了 ; 在callback function中，讓他在console印出經緯度並改變網頁上顯示的內容。

完整程式碼如下：

一開始用瀏覽器打開並開啟console，如果成功連上

接著，開始播放bag，經緯度資料會顯示在網頁上，console也會印出相關訊息

二、繪製在地圖上

接著是將接收到的資訊畫在地圖上。

首先是顯示地圖，可以參考Google的範例，主要就是html部分創建了一個div ( <div id=”map”></div> )，並在script中初始化。

<script>

var map;

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: -34.397, lng: 150.644},

zoom: 8

});

}

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

這裡的 YOUR_API_KEY 不給其實也沒關係，只是顯示的地圖會有 For development purposes only 的字樣。

接下來來處理路徑。主要就是在每次收到GPS訊息的callback function中，新收到的點和上一次收到的點連成一條線並畫出來。

完整code

Line 23的 PolylineCoordinates 用來存放GPS的座標。

callback function中的Line 57~ 60是在第一次收到座標後，更改地圖的中心，在一開始初始化時還不知道位置，所以隨便訂在經緯度都是0的地方。

57 // set the center if first receive message

58 if(PolylineCoordinates.length == 0) {

59 map.setCenter(latlng);

60 }

Line 62~ 80則是整個畫上路徑。

最後結果：
[]
['Ros', 'Map', 'JavaScript', 'Google', 'Gps']