0

アプリケーションに Google Maps API 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]
];

まず、この位置のそれぞれにマーカーを追加したい

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'
  });

そして、これは画面の中央で初期化されたすべてのマーカーをズームする必要がありますが、ユーザーが地図上の何か他のものを見るために魚を釣る可能性があるため、後で中央で最初に 1 回だけ使用されます。

マーカーを常に移動させたいので、常に新しい位置を取得するためにイベント ハンドラーを追加する必要がありますか?

次に、マーカーをクリックするとズームされ、マーカーはまだ移動しています（新しい位置を取得しています）が、php配列で送信するそのIDを使用する必要があるため、そのパラメーターでいくつかの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);
  });
  });
}

だから基本的に、私が達成したいことはすべてあなたに話しました。多くの人が同じことをしたと確信しています. これらは、多くのソースからのコードの一部であり、それらを連携させて、上で書いたようにいくつかの小さな新機能を追加する必要があります。

ありがとうございました

4

2 に答える 2

2

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
            });

アプリケーションでは、データベースは何らかの手段で更新されます。ここでは、データベースは静的であり、動き (デモ用) は PHPrandで人為的に作成されるため、マーカーは数秒ごとに異なる場所に表示されます。

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 " ] }";

マーカーの追跡は、2 つのリスナーで行われます。

        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;
        });
于 2012-06-11T00:04:05.193 に答える
0

このファイルGeocoder.htmには、目的を達成するために必要なすべてのコードが含まれています (ID とアクションが添付されたクリック可能なアイコンのリストなど)。

449 ～ 460 行のコメントを外すだけで、それがどのように機能するかを確認できます。

ソースを取得して、必要に応じて使用することは大歓迎です。これはオープンソースです。

于 2012-06-14T14:57:37.607 に答える