2013-07-07 2 views
1

전 세계를 여행 중이므로 다른 사람들이 내가 어디에 있는지 볼 수 있도록 현재 위치 (독자의 위치가 아닌)를 보여주는 Google지도를 웹 페이지에 삽입해야합니다.현재 위치를 보여주는 Google지도 삽입하기

누구나 쉽게 해결할 수 있습니까? 내 장소를 사용하여지도를 만들고 내 페이지에 삽입하는 방법을 알고 있지만 지금까지지도 API를 사용하지 않아도되었습니다. 나는 HTML과 Javascript에 대한 약간의 지식을 가지고 있지만 그렇게 할 수 있으면 최소한으로 피한다.

누구에게도 해결책이 있습니까?

+0

걷거나 차를 운전하거나 자신이있는 곳의 정적 인 위치를 추적하고 싶습니까? –

+0

또한 답장 : http://stackoverflow.com/questions/43718998/share-my-current-location-with-the-world-publicly/43719290#43719290 – McMurphy

답변

-1

현재 위치를지도에 표시해야합니다. 그 때문에지도로 표시하기 위해서는 위치 위도와 경도를 가져야합니다.

http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false 

이 페이지에서이 HTML 코드를 시도 :

에 의해 것을 얻는다.

<head> 
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no' /> 
    <style type='text/css'> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    <script type='text/javascript' src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false> 
    </script> 
    <script type='text/javascript'> 
     function initialize() { 
     var myLatlng = new google.maps.LatLng(str_lat,str_lng); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:'Location!' 
     }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id='map-canvas'/> 
    </body> 
</html>; 
-2

여기 https://developers.google.com/maps/documentation/javascript/tutorial

를 참조 그들이

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"/> 
    </body> 
</html> 
1

위의 링크에 설명되어 새로운 용어에 대해 걱정하지 마십시오 당신의 능력을 판단하기위한 코드를 참조하십시오 str_lat 및 str_lng은 사용자의 위치입니다 더 이상 내 대답은 your other question 에서이 예제의 유용 비트 찾을 수 있습니다 : -

작은 푸른 남자/당 아들/아이콘이 사용자의 위치를 ​​따릅니다. 지도를 멀리 스크롤하면 고정 파란색지도 제어 맨을 눌러 위치를 다시 중심에 배치 할 수 있습니다. 당신이 움직일 때 (감속 된 위치 업데이트가 바뀌고있을 때) 아이콘이 걷고 있지 않으면 걷고 있습니다.

희망 중포 기지는 W3C/IETF의 속도 혹을 우회하기 위해 최선을 다하고있다 매우 추적 우리에게 ServiceWorker 배경 위치 정보를 제공합니다 : -

("독립"미주리 Chrome bug에서 "디스플레이"명백한 버그가 있습니다) 곧.

+0

내가 현상금을 수여 할 때까지 22 시간이 지났습니다. D – vimes1984

+0

건배. 현상금에 대해서 너무 걱정하지 않아. 어쨌든 고마워. hypoCampus를 실행하려는 사용자는 위치 서비스를 사용하도록 설정하고 앱 액세스 권한을 부여해야합니다. 또한 localStorage가 필요하므로 개인 검색을 사용할 수 없습니다. 마지막으로 크롬, 오페라 또는 삼성 브라우저에서 홈 화면에 추가하여 경험을 향상시킵니다. 다음 버전의 Chrome (또는 n + 1) 웹 앱은 1 급 App으로 표시됩니다. (그들이 여전히 registerApp 메소드를 가지고있을 때 파이어 폭스처럼) – McMurphy

관련 문제