사용자가 이동할 때 어떻게 마커 위치를 움직일 수 있습니까?

저는 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]])

성공

입력 매개 변수로 위치 오브젝트를 콜백 함수.
오류 (옵션)

입력 매개 변수로 PositionError 오브젝트를 취해 선택적 콜백 함수.
옵션 (옵션)

옵션 PositionOptions 오브젝트.

그리고 이제 문제가 발생하면이 코드를 사용할 수 있습니다. 당신이 구글의 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

정말 고마워. 내가 다시 시도해 볼게. –

사용자가 이동할 때 어떻게 마커 위치를 움직일 수 있습니까?

답변

관련 문제