функция геолокации в мобильном jquery - PullRequest
Новая
       40

функция геолокации в мобильном jquery

0 голосов
/ 07 февраля 2012

У меня есть этот HTML-файл: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>

  <meta name="description" content="" />
  <meta name="author" content="Salvatore Mazzarino" />

  <meta name="viewport" content="width=device-width; initial-scale=1.0" />

  <!-- jquery mobile scripts -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-   1.0.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

  <!-- my own style sheet -->
  <link rel="stylesheet" href="./assets/css/style.css" type="text/css" />

  <!-- google maps api script -->
  <script type="text/javascript" src="./includes/js_map.js"></script>
  <script src="http://maps.google.com/maps/api/jssensor=false"></script>
</head>

<body>

    <div data-role = "page" id = "map-page">
        <div data-role = "header">
            <h1>Your position</h1>
        </div>

        <div data-role = "content" id = "map-canvas">
            <!-- here the map -->
        </div>
    </div>

 </body>
</html>

и этот файл js: 

     $( "#map-page" ).live( "pageinit", function() 
                               {

// Default to Via Messina,Catania,IT when no geolocation support
var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151);

if ( navigator.geolocation ) 
{

    function success(pos) 
    {

        // Location found, show coordinates on map
        drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
    }

    function fail() 
    {

        drawMap(defaultLatLng); // Show default map
    }

    // Find users current position
    navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 500000});

 } 
 else 
 {
    drawMap(defaultLatLng); // No geolocation support
 }

function drawMap(latlng) {

        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(
        document.getElementById("map-canvas"), myOptions);
        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "Greetings!"
        });
}
});

Я пытаюсь получить свою позицию. На html-странице появляется маска, но ничего не добавлено и карта по умолчанию. Зачем? есть идеи?

1 Ответ

1 голос
/ 07 февраля 2012

Не видя вашего живого кода, трудно понять, может ли какой-либо из CSS вызывать проблемы с отображением. Однако есть как минимум две вещи, которые необходимо исправить:

  1. Ваш вызов в Google Maps API должен быть перемещен выше вашего собственного файла JS (в заголовке документа).

  2. В вашем URL-адресе есть ошибка, которая ссылается на файл JS Maps API. Измените его с:

http://maps.google.com/maps/api/jssensor=false

до:

http://maps.google.com/maps/api/js?sensor=false

Мне удалось загрузить карту и показать маркер в центре карты.

...