Google maps API 3 нужна помощь

Question

Я использую API Google Maps 3 для своего приложения.

Так что я хочу сделать следующее. При загрузке страницы я получить массив позиций в этом формате:

var locations = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 151.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.259302, 1] 
]; 

Фирса Я хочу, чтобы добавить маркер к каждому из этого positins

var marker, i; 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map 
     }); 

Картина, которая идет по маркеру:

var image = new google.maps.MarkerImage("images/truck3.png", 
     new google.maps.Size(32.0, 37.0), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(16.0, 18.0) 
    ); 
    var shadow = new google.maps.MarkerImage("images/shadow-truck3.png", 
     new google.maps.Size(51.0, 37.0), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(16.0, 18.0) 
    ); 

    var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    map: map, 
    icon: image, 
    shadow: shadow, 
    title: 'Click to zoom' 
    }); 

И это должно масштабировать все маркеры, которые инициализируются в центре экрана, но только один раз в начале позже в центре не используется, так как пользователь может f иш посмотреть что-то еще на карте.

Я хочу, чтобы маркеры двигались все время, поэтому, возможно, мне нужно добавить обработчик событий, чтобы все время получать новую позицию?

Затем, когда вы нажимаете на маркер, вы увеличиваете масштаб, а маркер все еще перемещается (получая новую позицию), но теперь мне нужно использовать этот идентификатор, который я вышлю в массиве php, чтобы я мог вызвать некоторые php функция с этим параметром.

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

Часть с щелчку:

google.maps.event.addListener(marker, 'click', function() { 
    map.setZoom(13); 
    map.setCenter(marker.getPosition()); 
    google.maps.event.addListener(map, 'center_changed', function() { 
    // 1 seconds after the center of the map has changed, pan back to the 
    // marker. 
    window.setTimeout(function() { 
     map.panTo(marker.getPosition()); 
    }, 1000); 
    }); 
    }); 
} 

Поэтому в основном я сказал вам все, что я хочу достичь, я уверен, что многие из вас сделал то же самое. Это часть кода из множества источников, которые мне нужны, чтобы они работали вместе и добавляли некоторые более мелкие новые функции, как я писал выше.

Спасибо

Answer 1

Так это звучит, как вы запрашиваете переменную locations с запросом к базе данных повторяется каждые несколько секунд. В этой демонстрации я использую JSON для извлечения данных и обновления местоположения или создания маркера, если он еще не существует.

http://freezoo.alwaysdata.net/truck2.html

function updateTrucks() { 
     $.ajax({ 
     url: "gettruck.php", 
     cache: false, 
     dataType: 'json', 
     data: {}, 
     error: function(jqxhr, textStatus, errorThrown) { 
      alert("Error: " + textStatus + " " + errorThrown); 
     }, 
     success: function(data) { 
     for(var i = 0; i < data.results.length; i++) { 
      if(trucks.hasOwnProperty(data.results[i].id)) { 
      // update position 
      trucks[data.results[i].id].setPosition(new google.maps.LatLng(
       parseFloat(data.results[i].lat), 
       parseFloat(data.results[i].lng))); 
      trucks[data.results[i].id].speed = data.results[i].speed; 
      } 
      else { 
      // create new marker 
      trucks[data.results[i].id] = new google.maps.Marker({ 
       map: map, 
       position: new google.maps.LatLng(
       parseFloat(data.results[i].lat), 
       parseFloat(data.results[i].lng)), 
       title: data.results[i].name, 
       id: data.results[i].id 
      }); 

В приложении база данных будет обновляться с помощью некоторых средств, здесь, база данных является статическим и движение (для демонстрации) искусственно создается с PHP rand, поэтому каждые несколько секунд маркеров появляются в разных местах.

header("Content-type: application/json"); 
echo '{ "results" : [ '; 

$gettruck_result = $dbh->query("SELECT * FROM `truck`"); 
$result_array = array(); 

foreach($gettruck_result as $row) { 
    $newlat = $row['lat'] + (0.0025 * rand(-3,3)); 
    $newlng = $row['lng'] + (0.0025 * rand(-3,3)); 

    $speed = $row['speed'] + rand(1,8); 

    $row_object = '{'; 
    $row_object .= '"id": "' . $row['id'] . '", '; 
    $row_object .= '"speed": "' . $speed . '", '; 
    $row_object .= '"name": "' . $row['name'] . '", '; 
    $row_object .= '"lat": "' . $newlat . '", '; 
    $row_object .= '"lng": "' . $newlng . '"'; 
    $row_object .= '}';  
    $result_array[] = $row_object; 
} 

$result_str = implode(", ", $result_array); 
echo $result_str; 
echo " ] }"; 

Отслеживание маркера осуществляется с помощью двух слушателей:

 google.maps.event.addListener(trucks[data.results[i].id], 'position_changed', function() { 
      if(typeof tracked !== "undefined") { 
      if(this.id == tracked.id) { 
       map.panTo(this.getPosition()); 
       $("#speed").val(this.speed); 
      } 
      } 
     });   

     google.maps.event.addListener(trucks[data.results[i].id], 'click', function() { 
      $("#trackedId").val(this.id); 
      map.setZoom(13); 
      map.setCenter(this.getPosition()); 
      tracked = this; 
     }); 

Answer 2

Этот файл Geocoder.htm содержит весь код, необходимо добиться того, что вы пытаетесь сделать (список интерактивными иконок с идентификаторами и действий прилагается, и т.д. .).

Просто раскол линий 449-460, и вы можете видеть, как это работает.

Вы можете воспользоваться источником и использовать его по своему усмотрению, это с открытым исходным кодом.