位置追跡で複数の緯度と経度を追加する方法Google API

-1

ここでは、このGoogle APIの2つの場所（緯度、経度）のみを提供して位置追跡を行っています。しかし、私はもう一つの場所（緯度、経度）を追加する必要があります。私はこれを行うことはできますか？位置追跡で複数の緯度と経度を追加する方法Google API

function initMap() { 
 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
 
     var directionsService = new google.maps.DirectionsService; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 14, 
 
      center: {lat: 12.9577129, lng: 77.6764937} 
 
     }); 
 
     directionsDisplay.setMap(map); 
 

 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
     document.getElementById('mode').addEventListener('change', function() { 
 
      calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
     }); 
 
     } 
 

 
     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
     var selectedMode = document.getElementById('mode').value; 
 
     directionsService.route({ 
 
      origin: {lat: 12.9577129, lng: 77.6764937}, // Haight. 
 
      destination: {lat: 12.9630167, lng: 77.6268656}, // Domlur. 
 
      // Note that Javascript allows us to access the constant 
 
      // using square brackets and a string value as its 
 
      // "property." 
 
      travelMode: google.maps.TravelMode[selectedMode] 
 
     }, function(response, status) { 
 
      if (status == 'OK') { 
 
      directionsDisplay.setDirections(response); 
 
      } else { 
 
      window.alert('Directions request failed due to ' + status); 
 
      } 
 
     }); 
 
     }

<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY&callback=initMap"> 
 
    </script> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Travel modes in directions</title> 
 
    <style> 
 
     /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto','sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="floating-panel"> 
 
    <b>Mode of Travel: </b> 
 
    <select id="mode"> 
 
     <option value="DRIVING">Driving</option> 
 
     <option value="WALKING">Walking</option> 
 
     <option value="BICYCLING">Bicycling</option> 
 
     <option value="TRANSIT">Transit</option> 
 
    </select> 
 
    </div> 
 
    <div id="map"></div>

ので、マーカーは、AとBのように示すマップ、私はそれはそれはAとBを示すべき1以上を追加すると仮定し、C.

solution.Here 2 lacationsがある見つける私はより多くの時間を費やしたが、私はできませんよ

出典

2017-08-10 subikshan M

waypointsが必要です。

ウェイポイントは、以下のフィールドから構成されています

位置（必須）は、ウェイポイントのアドレスを指定します。

経由地（オプション）このウェイポイントがルート上の実際の停止（真）または指示された位置（false）を介してルーティングする代わりにのみ優先であるかどうかを示します。ストップオーバーはデフォルトでtrueです。

waypointsの配列をDirectionsServiceのroute()メソッドに渡すことができます。 waypointは次のようになります。

var waypoint = { 
    location: {lat: 12.9590167, lng: 77.7064937}, 
    stopover: true 
} 

// or 

var waypoint = { 
    location: 'Some address, city', 
    stopover: true 
}

そして、あなたはまた、here

function initMap() { 
 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
 
     var directionsService = new google.maps.DirectionsService; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 14, 
 
      center: {lat: 12.9577129, lng: 77.6764937} 
 
     }); 
 
     directionsDisplay.setMap(map); 
 

 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
     document.getElementById('mode').addEventListener('change', function() { 
 
      calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
     }); 
 
     } 
 

 
     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
     var selectedMode = document.getElementById('mode').value; 
 
     
 
     /* configure waypoints */ 
 
     var waypts = []; 
 
     waypts.push({ 
 
       location: {lat: 12.9590167, lng: 77.7064937}, 
 
       stopover: true 
 
      },{ 
 
       location: {lat: 12.9600167, lng: 77.7364937}, 
 
       stopover: true 
 
      }); 
 
      
 
     directionsService.route({ 
 
      origin: {lat: 12.9577129, lng: 77.6764937}, // Haight. 
 
      destination: {lat: 12.9630167, lng: 77.6268656}, // Domlur. 
 
      // Note that Javascript allows us to access the constant 
 
      // using square brackets and a string value as its 
 
      // "property." 
 
      travelMode: google.maps.TravelMode[selectedMode], 
 
      waypoints: waypts 
 
     }, function(response, status) { 
 
      if (status == 'OK') { 
 
      directionsDisplay.setDirections(response); 
 
      } else { 
 
      window.alert('Directions request failed due to ' + status); 
 
      } 
 
     }); 
 
     }

<script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY&callback=initMap"> 
 
    </script> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Travel modes in directions</title> 
 
    <style> 
 
     /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #floating-panel { 
 
     position: absolute; 
 
     top: 10px; 
 
     left: 25%; 
 
     z-index: 5; 
 
     background-color: #fff; 
 
     padding: 5px; 
 
     border: 1px solid #999; 
 
     text-align: center; 
 
     font-family: 'Roboto','sans-serif'; 
 
     line-height: 30px; 
 
     padding-left: 10px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="floating-panel"> 
 
    <b>Mode of Travel: </b> 
 
    <select id="mode"> 
 
     <option value="DRIVING">Driving</option> 
 
     <option value="WALKING">Walking</option> 
 
     <option value="BICYCLING">Bicycling</option> 
 
     <option value="TRANSIT">Transit</option> 
 
    </select> 
 
    </div> 
 
    <div id="map"></div>

出典

2017-08-10 07:50:32 codtex

Googleの例を見ることができるここでは、二つの値（緯度、LNG）を持つ配列と宛先我々をwaypts 1つの値（lat、lng）を持っています。私たちはこのようにしています。 –

@subikshanMドキュメンテーションへのリンクがいくつかありますので、そこにお読みください。 'route（）'メソッドを呼び出すときは常に 'origin'と' destination'を渡す必要があります。それらの2つの間にポイントを渡したい場合は、オプションで 'waypoints 'で行うことができます。それはそれで、これはGoogleライブラリの設計です。あなたはあなたが望むだけ多くの「waypoints」を置くことができます – codtex

私のデータベースには私は10の値（緯度、経度）を持っています。この値はどういうふうにやったのですか？ –

位置追跡で複数の緯度と経度を追加する方法Google API

答えて

関連する問題