Pereiti prie turinio

C# integracija su žemėlapiu

Gufis1995

Sukūrė Gufis1995
Programuotojų kampas

 Dalintis Sekėjai 2

Rekomenduojami pranešimai

Gufis1995

Gufis1995 0

Sukurta
Sukurta

Sveiki. Kuriu sistemą akademiniais tikslais, kuri iš duomenų bazės paima adresus ir turi sugeneruoti maršrutą bei jį atvaizduoti žemelapyje. Naudoju Visual studio 2017 C#. Daug laiko praleidau ieškodamas įvarių API, tačiau nieko naudingo neradau. Gal kas susidūrėt su panašia užduotimi ir galit ką patarti?

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Gufis1995

Gufis1995 0

Atrašyta
  • Autorius
Atrašyta

Projekte sukūriau html formą, kurioje naudoju directions api kodą. Viskas kaip ir veikia, žemelapį atidaro, maršrutą suplanuoja.

https://imgur.com/a/VWwcVeR

 

Dabar problema su waypoints. Pagal šį kodą galima pasirinkti tik jame aprašytus adresus. Ar įmanoma šiuos adresus paimti iš turimos duomenų bazės? MYSQL localhost..

Niekaip nesuprantu kaip perduoti duomenis į HTML failą iš turimos DB.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
MW3

MW3 95

Atrašyta
Atrašyta

Projekte sukūriau html formą, kurioje naudoju directions api kodą. Viskas kaip ir veikia, žemelapį atidaro, maršrutą suplanuoja.

https://imgur.com/a/VWwcVeR

 

Dabar problema su waypoints. Pagal šį kodą galima pasirinkti tik jame aprašytus adresus. Ar įmanoma šiuos adresus paimti iš turimos duomenų bazės? MYSQL localhost..

Niekaip nesuprantu kaip perduoti duomenis į HTML failą iš turimos DB.

 

Žinoma galima. Su kuo html paišai? Statinį atiduodi ar surenderini kaip nors?

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Gufis1995

Gufis1995 0

Atrašyta
  • Autorius
Atrašyta

Html dokumentą įterpiau į c# projektą su visual studio. Jeigu neklystu, statinis html. Html kodą paėmiau iš https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

 

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Waypoints in directions</title>
   <style>
     #right-panel {
       font-family: 'Roboto','sans-serif';
       line-height: 30px;
       padding-left: 10px;
     }

     #right-panel select, #right-panel input {
       font-size: 15px;
     }

     #right-panel select {
       width: 100%;
     }

     #right-panel i {
       font-size: 12px;
     }
     html, body {
       height: 100%;
       margin: 0;
       padding: 0;
     }
     #map {
       height: 100%;
       float: left;
       width: 70%;
       height: 100%;
     }
     #right-panel {
       margin: 20px;
       border-width: 2px;
       width: 20%;
       height: 400px;
       float: left;
       text-align: left;
       padding-top: 0;
     }
     #directions-panel {
       margin-top: 10px;
       background-color: #FFEE77;
       padding: 10px;
       overflow: scroll;
       height: 174px;
     }
   </style>
 </head>
 <body>
   <div id="map"></div>
   <div id="right-panel">
   <div>
   <b>Start:</b>
   <select id="start">
     <option value="Halifax, NS">Halifax, NS</option>
     <option value="Boston, MA">Boston, MA</option>
     <option value="New York, NY">New York, NY</option>
     <option value="Miami, FL">Miami, FL</option>
   </select>
   <br>
   <b>Waypoints:</b> <br>
   <i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
   <select multiple id="waypoints">
     <option value="montreal, quebec">Montreal, QBC</option>
     <option value="toronto, ont">Toronto, ONT</option>
     <option value="chicago, il">Chicago</option>
     <option value="winnipeg, mb">Winnipeg</option>
     <option value="fargo, nd">Fargo</option>
     <option value="calgary, ab">Calgary</option>
     <option value="spokane, wa">Spokane</option>
   </select>
   <br>
   <b>End:</b>
   <select id="end">
     <option value="Vancouver, BC">Vancouver, BC</option>
     <option value="Seattle, WA">Seattle, WA</option>
     <option value="San Francisco, CA">San Francisco, CA</option>
     <option value="Los Angeles, CA">Los Angeles, CA</option>
   </select>
   <br>
     <input type="submit" id="submit">
   </div>
   <div id="directions-panel"></div>
   </div>
   <script>
     function initMap() {
       var directionsService = new google.maps.DirectionsService;
       var directionsDisplay = new google.maps.DirectionsRenderer;
       var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 6,
         center: {lat: 41.85, lng: -87.65}
       });
       directionsDisplay.setMap(map);

       document.getElementById('submit').addEventListener('click', function() {
         calculateAndDisplayRoute(directionsService, directionsDisplay);
       });
     }

     function calculateAndDisplayRoute(directionsService, directionsDisplay) {
       var waypts = [];
       var checkboxArray = document.getElementById('waypoints');
       for (var i = 0; i < checkboxArray.length; i++) {
         if (checkboxArray.options[i].selected) {
           waypts.push({
             location: checkboxArray[i].value,
             stopover: true
           });
         }
       }

       directionsService.route({
         origin: document.getElementById('start').value,
         destination: document.getElementById('end').value,
         waypoints: waypts,
         optimizeWaypoints: true,
         travelMode: 'DRIVING'
       }, function(response, status) {
         if (status === 'OK') {
           directionsDisplay.setDirections(response);
           var route = response.routes[0];
           var summaryPanel = document.getElementById('directions-panel');
           summaryPanel.innerHTML = '';
           // For each route, display summary information.
           for (var i = 0; i < route.legs.length; i++) {
             var routeSegment = i + 1;
             summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
                 '</b><br>';
             summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
             summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
             summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
           }
         } else {
           window.alert('Directions request failed due to ' + status);
         }
       });
     }
   </script>
   <script async defer
   src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
   </script>
 </body>
</html>

Nuoroda į pranešimą
Dalintis kituose puslapiuose
MW3

MW3 95

Atrašyta
Atrašyta

Supratau.

 

Šiaip geresnis variantas būtų naudot kokį Razor ir jau paduoti sugeneruotą HTML, kuriame jau yra įdėti laukai iš duomenų bazės.

 

Kitas variantas būtų, ant tavo to html failo įmesti javascriptą, kuris pasiųstų GET request'ą į tavo C# API ir paprašytų gauti adresus - gavęs adresus pakeistų HTML.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 2
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

×
×
  • Pasirinkite naujai kuriamo turinio tipą...