ユーザーの移動に合わせてマーカーの位置を移動するにはどうすればよいですか？

私はAngularJSとJavaScriptを使用して位置追跡モジュールで作業しています。私の目的は、マーカーの移動だけでなく、緯度と経度の受信に応じて個々のユーザーの位置を設定することです。私はマーカーを取得していますが、移動していません。ユーザーの移動に合わせてマーカーの位置を移動するにはどうすればよいですか？

var marker = new google.maps.Marker({ 
    position: pos, 
    map: $scope.map 
}); 
for (var k = 0; k < $scope.arr.length; k++) { 
    var found = $scope.arr.some(function (el) { 
     return el.from === name; 
    }); 
    if (!found) { 
     $scope.arr.push({ 
      from: name, 
      marker: marker, 
      latitude: $scope.LocInfor.latitude, 
      longitude: $scope.LocInfor.longitude 
     }); 
    } 
    var pos = new google.maps.LatLng($scope.arr[k].latitude, $scope.arr[k].longitude); 
    marker.setPosition(pos); 
}

出典

2017-04-05 Anonymous

https://developers.google.com/maps/documentation/javascript/markers "マーカーをドラッグ可能にする" セクション – ZiTAL

複数のマーカーのGoogleマップを検索しようとしましたか？？ – HoangHieu

JavaScriptで提案してください、navigator.geolocation.watchPosition()方法は、デバイスの位置が変化するたびに自動的に呼び出されるハンドラ関数を登録するために使用されています。オプションで、エラー処理コールバック関数を指定することもできます。

構文：

navigator.geolocation.watchPosition(success[, error[, options]])

成功

入力パラメータとしての位置オブジェクトを受け取り、コールバック関数。
エラー（オプション）

入力パラメータとして位置誤差オブジェクトを受け取り、オプションのコールバック関数。
オプション（オプション）

任意PositionOptionsオブジェクト。

そして、あなたの問題では、このコードを使用することができます。あなたは、GoogleのAPIキーでYOUR-API-KEYを置き換える必要があり、完全なケアう：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <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; 
    } 
</style> 
</head> 
<body> 
    <div id="map"></div> 
<script> 

var map; 
var marker = new google.maps.Marker({ 
      position: pos, 
      map: map, 
      title: "Test" 
     }); 


    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 6 
    }); 
    getLocationUpdate(); 
    } 

    function showLocation(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     marker.setPosition(pos); 
     map.setCenter(pos); 


     alert("Latitude : " + pos.lat + " Longitude: " + pos.lng); 
    } 

    function errorHandler(err) { 
     if(err.code == 1) { 
      alert("Error: Access is denied!"); 
     } 

     else if(err.code == 2) { 
      alert("Error: Position is unavailable!"); 
     } 
    } 

    function getLocationUpdate(){ 
     if(navigator.geolocation){ 
      // timeout at 60000 milliseconds (60 seconds) 
      var options = { 
       enableHighAccuracy: false, 
       timeout: 5000, 
       maximumAge: 0 
      }; 
      var geoLoc = navigator.geolocation; 
      geoLoc.watchPosition(showLocation, errorHandler, options); 
     } 
    } 



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

出典

2017-04-06 15:11:54

ありがとうございました。私はあなたに戻ってきてみましょう。 –

ユーザーの移動に合わせてマーカーの位置を移動するにはどうすればよいですか？

答えて

関連する問題