显示方向

时间:2018-04-26 22:11:24

标签: html

我在HTML页面中使用JavaScript来显示带有标记的GPS位置,并且所有这些GPS位置都已连接

我正在尝试使用Google maps V3 API实现基于地图/方向的应用程序。到目前为止,我已经能够显示地图并显示所选两个地点的路线。第一个是我当前的位置,第二个是客户的位置(他/她的信息存在于我的数据库中)。所有标记都正确显示在输出中。

1 个答案:

答案 0 :(得分:0)

要获取指向坐标指定位置的路线,请将其设为google.maps.LatLng个对象。要从select中的数据中获取,请将坐标保存为值中的字符串,然后解析纬度和经度以创建LatLng对象。

  1. 将坐标保存在选项值中:
  2. for (var i = 0; i < data.length; i++) {
      displayLocation(data[i]);
      addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
    }
    
    1. 解析这些坐标并在路线请求中创建google.maps.LatLng对象:
    2. function calculateRoute() {
      
        var start = document.getElementById('start').value;
        var destination = document.getElementById('destination').value;
        console.log("selected option value=" + destination);
        var destPt = destination.split(",");
        var destination = new google.maps.LatLng(destPt[0], destPt[1]);
        if (start == '') {
          start = center;
        }
        // ....
      

      proof of concept fiddle

      代码段

      &#13;
      &#13;
      var map;
      var directionsService;
      var directionsDisplay;
      var geocoder;
      var infowindow;
      
      function init() {
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
        geocoder = new google.maps.Geocoder();
        infowindow = new google.maps.InfoWindow();
        var mapOptions = {
          zoom: 6,
          center: center = new google.maps.LatLng(32, -6),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
      
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions_panel'));
      
        // Detect user location
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
      
            var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      
            geocoder.geocode({
              'latLng': userLocation
            }, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                document.getElementById('start').value = results[0].formatted_address
              }
            });
      
          }, function() {
            alert('Geolocation is supported, but it failed');
          });
        }
      
        makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/358669eda44d8d221bf58c629402c40b/raw/eca59a21899fe19b1f556ff033a33dff2a6bdd0c/get_data_google_api', function(data) {
      
          var data = JSON.parse(data.responseText);
          var selectBox = document.getElementById('destination');
      
          for (var i = 0; i < data.length; i++) {
            displayLocation(data[i]);
            addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
          }
        });
      
      }
      
      function addOption(selectBox, text, value) {
        var option = document.createElement("OPTION");
        option.text = text;
        option.value = value;
        selectBox.options.add(option);
      }
      
      function calculateRoute() {
        var start = document.getElementById('start').value;
        var destination = document.getElementById('destination').value;
        console.log("selected option value=" + destination);
        var destPt = destination.split(",");
        var destination = new google.maps.LatLng(destPt[0], destPt[1]);
        if (start == '') {
          start = center;
        }
      
        var request = {
          origin: start,
          destination: destination,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        console.log("origin:" + start);
        console.log("dest:" + destination.toUrlValue(12));
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }
      
      function makeRequest(url, callback) {
        var request;
        if (window.XMLHttpRequest) {
          request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
        } else {
          request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
        }
        request.onreadystatechange = function() {
          if (request.readyState == 4 && request.status == 200) {
            callback(request);
          }
        }
        request.open("GET", url, true);
        request.send();
      }
      
      
      function displayLocation(rythmstu_innotec) {
        var content = '<div class="infoWindow"><strong> Code Client : ' + rythmstu_innotec.CodeClient + '</strong>' +
          '<br />Latitude : ' + rythmstu_innotec.Latitude +
          '<br />Longitude : ' + rythmstu_innotec.Longitude +
          '<br />Route : ' + rythmstu_innotec.Route +
          '<br />Secteur : ' + rythmstu_innotec.Secteur +
          '<br />Agence : ' + rythmstu_innotec.Agence +
          '<br />prenom de Client : ' + rythmstu_innotec.PrenomClient +
          '<br />Num Adresse : ' + rythmstu_innotec.NumAdresse +
          '<br />GeoAdresse : ' + rythmstu_innotec.GeoAdresse +
          '<br />Téléphone : ' + rythmstu_innotec.Tel +
          '<br />Whatsapp : ' + rythmstu_innotec.Whatsapp +
          '<br />Nbr Frigos : ' + rythmstu_innotec.NbrFrigo +
          '<br />Ouverture Matin : ' + rythmstu_innotec.OpenAm +
          '<br />Fermeture Matin : ' + rythmstu_innotec.CloseAm +
          '<br />Ouverture après-midi : ' + rythmstu_innotec.OpenPm +
          '<br />Fermeture Après-midi : ' + rythmstu_innotec.ClosePm + '</div>';
      
        if (parseInt(rythmstu_innotec.Latitude) == 0) {
          geocoder.geocode({
            'GeoAdresse': rythmstu_innotec.GeoAdresse
          }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.rythmstu_innotec,
                title: rythmstu_innotec.name
              });
      
              google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
              });
            }
          });
        } else {
          var position = new google.maps.LatLng(parseFloat(rythmstu_innotec.Latitude), parseFloat(rythmstu_innotec.Longitude));
          var marker = new google.maps.Marker({
            map: map,
            position: position,
            title: rythmstu_innotec.name
          });
      
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
          });
        }
      }
      &#13;
      body {
        font: normal 14px Verdana;
      }
      
      h1 {
        font-size: 24px;
      }
      
      h2 {
        font-size: 18px;
      }
      
      #sidebar {
        float: right;
        width: 30%;
      }
      
      #main {
        padding-right: 15px;
      }
      
      .infoWindow {
        width: 220px;
      }
      &#13;
      <title>MAP itinéraire </title>
      <meta charset="utf-8">
      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
      
      <body onload="init();">
      
      
      
        <form id="services">
          Location: <input type="text" id="start" value="Midar" /> Destination:
          <select id="destination" onchange="calculateRoute();"></select>
          <input type="button" value="afficher la direction" onclick="calculateRoute();" />
        </form>
      
        <section id="sidebar">
          <div id="directions_panel"></div>
        </section>
      
        <section id="main">
          <div id="map_canvas" style="width: 70%; height: 750px;"></div>
        </section>
      
      </body>
      &#13;
      &#13;
      &#13;