2016-09-23 1 views
-1

다음 용도로 모바일 앱을 만들려고합니다.1.지도에서 위치 표시자가 사용자와 함께 이동하도록 watchpostion으로 geolocation을 표시합니다. 2. 단단한 위치에있는 맵을 따라 대화 형 * 정보 창이있는 마커를 표시하십시오. 3. 지리적 위치에서 원하는 마커의 위치까지의 경로가 표시되도록 방향 가용성을 확보하십시오. * 대화 형으로 표시 마커에 데이터베이스 기능에서 가져 오기가 포함되기를 바랍니다. 데이터베이스는 선택한 줌 영역 내의 다양한 마커 포인트에서 사용 가능한 관심 제품의 현재 가격을 표시하고 가장 낮은 가격의 마커를 강조 표시하여 최상의 제안이있는 위치로 gt 열 방향을 선택할 수 있습니다. watchposition()지도 자체를 만들고 고정 된지도에 정보창을 만드는 방법을 만들었습니다. 그러나이 두 사람은 개별 프로젝트에 참여하고 있습니다.하지만 함께 사용하려고하면 미리보기가 비어 있습니다. 함께 일하는 방법? 나는 다음은 MyEclipse 2015에게 안정 버전inteactiv 표시자를 사용하여 geolocation

+1

제발 몇 가지 코드 샘플을 붙여넣고 더 쉽게 읽을 수 있도록 질문을 편집 해보십시오. 사람들이 여기에서 도움을 줄 수 있습니다. – Entea

+0

여기에 마커를 추가하려는 geolocation 코드가 있습니다. –

답변

0

를 사용하여 내가에 마커를 추가 할 위치 정보 코드입니다 해요 :

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Geolocation watchPosition()</title> 

<!-- for mobile view --> 
<meta content='width=device-width, initial-scale=1' name='viewport'/> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >  </script> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> 

<script type="text/javascript"> 

    // you can specify the default lat long 
    var map, 
     currentPositionMarker, 
     mapCenter = new google.maps.LatLng(57.736585899999994, 12.956377999999999), 
     map; 

    // change the zoom if you want 
    function initializeMap() 
    { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 18, 
      center: mapCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
    } 

    function locError(error) { 
     // tell the user if the current position could not be located 
     alert("The current position could not be found!"); 
    } 

    // current position of the user 
    function setCurrentPosition(pos) { 
     currentPositionMarker = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(
       pos.coords.latitude, 
       pos.coords.longitude 
      ), 
      title: "Current Position" 
     }); 
     map.panTo(new google.maps.LatLng(
       pos.coords.latitude, 
       pos.coords.longitude 
      )); 
    } 

    function displayAndWatch(position) { 

     // set current position 
     setCurrentPosition(position); 

     // watch position 
     watchCurrentPosition(); 
    } 

    function watchCurrentPosition() { 
     var positionTimer = navigator.geolocation.watchPosition(
      function (position) { 
       setMarkerPosition(
        currentPositionMarker, 
        position 
       ); 
      }); 
    } 

    function setMarkerPosition(marker, position) { 
     marker.setPosition(
      new google.maps.LatLng(
       position.coords.latitude, 
       position.coords.longitude) 
     ); 
    } 

    function initLocationProcedure() { 
     initializeMap(); 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(displayAndWatch, locError); 
     } else { 
      // tell the user if a browser doesn't support this amazing API 
      alert("Your browser does not support the Geolocation API!"); 
     } 
    } 

    // initialize with a little help of jQuery 
    $(document).ready(function() { 
     initLocationProcedure(); 
    }); 

</script> 

<!-- display the map here, you can changed the height or style --> 
<div id="map_canvas" style="height:25em; margin:0; padding:0;"></div>