Используйте местоположение iPhone для обновления карты Google - PullRequest
Новая
       7

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

0 голосов
/ 17 января 2012

Я создаю информационный сайт о цикле и хочу иметь возможность получать информацию о местоположении пользователей с их 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

1 Ответ

1 голос
/ 18 января 2012

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

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

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

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

...