Использование местоположения iPhone для обновления карты google

Question

Я создаю сайт с информацией о цикле и хочу, чтобы у вас было возможность захватить местоположение пользователей со своего iPhone, поэтому я обновляю свою карту Google и предоставляю пользователю соответствующую информацию. Существует модуль Drupal, называемый Geolocation, который использует параметр HTML5 для этого, и я нашел код, который выполняет задачу в приведенном ниже модуле.

// START: Autodetect clientlocation. 
      // First use browser geolocation 
      if (navigator.geolocation) { 
      browserSupportFlag = true; 
      $('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>'); 
      // Set current user location, if available 
      $('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() { 
       navigator.geolocation.getCurrentPosition(function(position) { 
       latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       Drupal.Geolocation.maps[i].setCenter(latLng); 
       Drupal.Geolocation.setMapMarker(latLng, i); 
       Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder'); 
       }, function() { 
       Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i); 
       }); 
      }); 
      } 

Есть ли у кого-нибудь опыт использования Google Maps API V3 этого или подобного? Я бы предпочел, чтобы пользователь нажал «Мое местоположение» или эквивалент, чтобы затем использовать местоположение своего iPhone, чтобы обновить карту, а не запрашивать ее автоматически. Это моя карта и массив маркеров, которые у меня есть. Как я могу использовать местоположение iPhone для его обновления?

function initialize() { 

    var myOptions = { 
    zoom: 14, 
    center: new google.maps.LatLng(51.51251523, -0.133201961), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var bikeLayer = new google.maps.BicyclingLayer(); 
    bikeLayer.setMap(map); 

    setMarkers(map, spots); 
} 


var spots = [ 

['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about <a href="/node/2901">this dock</a>'], 


['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about <a href="/node/2908">this dock</a>'], 


['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about <a href="/node/2923">this dock</a>'], 


['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about <a href="/node/2975">this dock</a>'], 


['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about <a href="/node/2982">this dock</a>'] 

]; 

function setMarkers(map, locations) { 

     var image1 = new google.maps.MarkerImage('amber-spot.png', 
     new google.maps.Size(30, 36), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < locations.length; i++) { 
    var spot = locations[i]; 
    var myLatLng = new google.maps.LatLng(spot[1], spot[2]); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: spot[3], 
     title: spot[0], 
     zIndex: spot[4], 
     html: spot[5] 
    }); 
    bounds.extend(myLatLng); 
    map.fitBounds(bounds); 
    var infowindow = new google.maps.InfoWindow({ 
}); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(this.html); 
    infowindow.open(map,this); 
}); 
    } 
} 

благодаря

Lee

Answer 1

Сначала вам нужен яваскрипт функция, которая будет срабатывать от нажатия кнопки или ссылка мыши. Эта функция будет использовать api geolocation api, доступную через html5, чтобы проверить, может ли пользователь предоставить вам свое местоположение и захватить его, если это так. Остальная часть функции будет использовать карты Google api для панорамирования этой координаты и установить уровень масштабирования соответствующим образом.

Здесь API Карт Google на карте объект, который имеет методы, вам нужно: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

И этот сайт имеет большой обзор в основном все, что вы пытаетесь сделать: http://www.html5laboratory.com/geolocation.php

Наконец Дон» Забудьте сохранить местоположение в базе данных или на стороне клиента javascript. Если вы сохраняете данные, предупредите пользователя об этом для последствий конфиденциальности.