разместить запрос на картографическом сервере с помощью Arduino Ethe rnet Shield - PullRequest
Новая
       98

разместить запрос на картографическом сервере с помощью Arduino Ethe rnet Shield

0 голосов
/ 12 апреля 2020

в первую очередь извините за май плохо английский sh я вьетнамский. Моя цель - отправить данные о местоположении (долгота и широта) на картографический сервер с помощью щита rnet, и на карте появится красная булавка, которая будет перемещаться по локации. Я новичок ie, и я пытаюсь установить запрос на отправку данных на сервер. Может кто-нибудь помочь мне с кодировкой Arduino. Я создаю карту, используя nodejs и herokuapp. Вот мой карт-сервер и код javascript: я ценю все подсказки и помощь, спасибо 

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <script src="../socket.io/socket.io.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDak84Kp0MT5ZuwzH2ec0tWZVrxyDdHgM&callback=initMap"
        async defer></script>
        
        <meta charset="utf-8">
        <style>      
            #map {
                height: 100%;
            }      
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map;
            
            var list = []


            
            var socket = io.connect('https://powerful-wildwood-04110.herokuapp.com');

            
            function initMap(lat = <%= lat %>,lng = <%= lng %>  ) {
                    
                    map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: lat, lng: lng},
                    zoom: 17
                });

                

                function addMarker(location, map, label) {
                    
                    myIcon = {
                        url: '/img/marker.png',
                        text: label,
                        fontSize: "12px",
                        color: "#e74c3c",
                        fontFamily: "montserrat",
                        size: new google.maps.Size(32, 38),
                        scaledSize: new google.maps.Size(32, 38),
                        labelOrigin: new google.maps.Point(9, 9),
                    };

                     
                    var marker = new google.maps.Marker({
                        
                        position: location,
                        
                        map: map,
                         
                        icon: myIcon,
                    });
                }

                
                function line(slat,slng,elat,elng){
                    var line = new google.maps.Polyline({
                        path: [new google.maps.LatLng(slat, slng), new google.maps.LatLng(elat, elng)],
                        strokeColor: "green",
                        strokeOpacity: 1.0,
                        strokeWeight: 2,
                        map: map,
                        icons: [{
                            icon: {
                                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                            },
                            offset: '100%',
                            repeat: '20px'
                        }]
                    });
                }

                
                socket.on('location',(data)=>{
                                        
                    list.push(data)    

                                    
                    list.forEach(item=>addMarker({lat:parseFloat(item.lat),lng:parseFloat(item.lng)},map,'pos'))
                    if (lists.length >= 2)
                    {
                        for(i=0;i<list.length-1;i++){
                            line(list[i].lat,list[i].lng,list[i+1].lat,list[i+1].lng)
                        }
                    }

                })                                   
            }            
        </script>        
    </body>
</html>

[1]: это мой картографический сервер https://powerful-wildwood-04110.herokuapp.com/

...