2013-07-07 3 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-код на вашей странице. str_lat и str_lng является вашим местоположением:

<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

В дополнение к моему ответу на your other question вы можете найти биты этого примера полезными: - hypoCampus

Маленький голубой человек/son/icon следует за вашим местоположением. Если вы прокрутите карты, вы можете нажать статического синего человека, контролирующего карту, для повторного центра в вашем местоположении. Когда вы двигаетесь (меняется изменение положения с дроссельной заслонкой), значок идет, иначе он стоит.

(Там есть ошибка с манифестом - «дисплей»: «автономная» в МО Chrome bug)

Надеется Firebase совершила в обходе скоростно-горбы W3C/IETF и даст нам ServiceWorker фон Geolocation отслеживание очень скоро.

+0

22 часа, пока я не смогу присудить награду: D – vimes1984

+0

Cheers. Не слишком суетился о щедрости. Спасибо, в любом случае. Для тех, кто хочет запустить hypoCampus, убедитесь, что у вас включена служба определения местоположения и предоставлена ​​возможность доступа к приложениям. Кроме того, вы не можете иметь частный просмотр, поскольку localStorage требуется. И, наконец, с браузерами Chrome, Opera или Samsung добавьте в Homescreen для улучшения опыта. Следующая версия Chrome (или n + 1) будет выглядеть как приложение первого класса. (Подобно Firefox, когда у них все еще были методы registerApp) – McMurphy

Смежные вопросы