jQuery Mobile + пользовательский интерфейс jQuery google maps + Fusion Markers - PullRequest
Новая
       14

jQuery Mobile + пользовательский интерфейс jQuery google maps + Fusion Markers

2 голосов
/ 10 августа 2011

это печет мою лапшу месяцами, честно говоря, я дизайнер, а не программист, поэтому этот тип сценариев немного сложнее, чем средний jquery / javascript, который я тоже использую.

Я не могу найти никакой базовой документации о том, как ее реализовать, кроме этого, но она не очень интуитивно понятна - http://jquery -ui-map.googlecode.com / svn / trunk / demos /jquery-mobile-example.html

Я пытался создать JSfiddle, но даже не могу заставить его работать (теперь работает благодаря царю)

Я создал мобильное приложение jQuery и очень хочу, чтобы функция геолокации работала с маркерами таблицы фьюжн (из моей таблицы фьюжн) и чтобы мне было позволено нажимать на маркеры таблицы фьюжн, чтобы открытьинформационное окно.Это информационное окно будет построено в виде таблиц слияния.

Мне нужно географическое местоположение, чтобы центрировать карту на текущем местоположении устройств - если географическое местоположение недоступно или запрещено пользователем устройства, тогда карта нуждаетсяцентрироваться на этих координатах 52.450939, -1.721002.

Следующий уровень - это всплывающее окно мобильного интерфейса jQuery, но это не критично, просто стандартный пузырь на карте.в порядке.

Обновленный JSFiddle ... http://jsfiddle.net/twGHC/30/

Номер моей таблицы слияния: 1260763

Расположение по умолчанию: (только еслиГеографическое положение недоступно) 52.450939, -1.721002

Уровень масштабирования: 13

Любой совет будет потрясающим, пожалуйста, не стесняйтесь JSfiddle it,Заранее спасибо.

Ответы [ 2 ]

3 голосов
/ 10 августа 2011

Вот рабочее решение, которое обнаруживает местоположение пользователя, помещает на него маркер и наносит на карту карту с помощью маркеров Fusion.Согласно документации Google Maps v3 API : 

$(function() {
  var position = new google.maps.LatLng(52.450939, -1.721002);

  getCurrentPosition = function(callback) {
    // Try W3C Geolocation (Preferred)
    if(navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        function(pos) {
          position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
            callback(position);
          }, callback(position));         
    } // Try Google Gears Geolocation
    else if (google.gears) {
      var geo = google.gears.factory.create('beta.geolocation');
      geo.getCurrentPosition(
        function(pos) {
          position = new google.maps.LatLng(pos.latitude,pos.longitude);
          callback(position);
        }, callback(position));          
    } // Browser doesn't support Geolocation
    else {
      // Drop the user off in Coventry =)
      callback(position);
    }
  };
     // call the above function
  getCurrentPosition(InitMap);
});

function InitMap(pos) {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: pos,
    zoom: 14,
    mapTypeId: 'roadmap'
  });

  var marker = new google.maps.Marker({
    position: pos, 
    animation: google.maps.Animation.DROP,
    map: map, 
    title: "You are here, mate!"
  });   

var layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'Geocodable address',
    from: '1260763'
    },
  });

  layer.setMap(map);
};

Когда пользователь запрещает отслеживать свое местоположение, исключение фиксируется в getCurrentPosition, однако второй необязательный параметр в этой функции является исключениемобработчик, поэтому то, что я сделал, просто передается в callback(position), так что местоположение по умолчанию устанавливается на карте.Если вы не хотите этого делать, переместите код инициализатора карты из InitMap в отдельную функцию и вместо этого вызовите его, когда будут обнаружены исключения, для отображения пустой карты.

Смотрите его в действии здесь: http://jsfiddle.net/twGHC/36/

PS Если ваш следующий вопрос «как добавить всплывающее окно при нажатии на маркер», вот что вам нужно сделать .

0 голосов
/ 16 августа 2011

Вот как это сделать с помощью jquery-ui-map: http://jsfiddle.net/rweCf/1/ http://jsfiddle.net/rweCf/1/embedded/result/

Если вы просто хотите изменить в пределах определенного радиуса позиции клиента, это то, как вы бы это сделали http://jsfiddle.net/Ywknf/1/ (местоположение клиента является начальной точкой, чтобы все могли видеть результаты)

Вот код, если URL не работает или код транка изменился 

$(function() {

  $('#map_canvas').gmap({'center': '52.450939, -1.721002', 'zoom': 10, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(event, map) { 
        $('#map_canvas').gmap('getCurrentPosition', function(results, status) {
            if ( status === 'OK' ) {
                var position = new google.maps.LatLng(results.coords.latitude, results.coords.longitude);
                var marker = $('#map_canvas').gmap('get', 'markers > client' );
                if ( !marker ) {
                    $('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': position, 'bounds': true });
                } else {
                    marker.setPosition(position);
                    map.panTo(position);
                }
            } else if ( status === 'NOT_SUPPORTED' ) {
                $('#map_canvas').gmap('addMarker', { 'id': 'client', 'position': $('#map_canvas').gmap('get', 'map').getCenter(), 'bounds': true });
            }
        });
        $('#map_canvas').gmap('loadFusion', { 'query': { 'select': 'Geocodable address', 'from': 1260763 } } );
    });  

});
...