5

API からの位置情報を使用して、マップ上に Google マップ マーカーをいくつか配置しようとしています。すべてのJSONデータをカウントし、「ドライバー名、ドライバーの緯度、ドライバーの経度」を配列に入れるforループを作成しようとしました。次に、この配列は、Google マップがこれらの場所を地図上にピン留めするのに役立ちます。以下のコード例:

setTimeout(function () {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(62.457171, 17.350953),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    var url = "http://blackcab.didair.se/api/drivers";
    var name;
    var lat;
    var lon;
    var locations;

    $.getJSON(url,

    function (response) {
        name = response.drivers[n].name;
        lat = response.drivers[n].currentLat;
        lon = response.drivers[n].currentLon;
        for (var n = 0; n < response.drivers.length; n++)
        var locations = [
            [name, lat, lon, n], ];
        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
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        });
}, 3000);

このコードは、常にこれらの位置をリロードする必要があるため、間隔内にあります。Google Chrome Web 開発者ツールで発生したエラーを調べましたが、さらにエラーが発生しました。これに対する簡単な解決策はありますか？まさに「くるみ割り人形」。

前もって感謝します！

ジャック

4

1 に答える 1

5

コードにかなりの数のエラーがあったようです。中括弧を除いて、たとえば、N を宣言する for ループを実際に使用する前に N を使用します。

常にマップ オブジェクトを再作成する必要はありません。maps オブジェクトは、呼び出される関数の外にある必要があります。

JSON 呼び出しは、SetInterval 関数内の唯一のものである必要があります。基本的に、インターバルが呼び出されるたびにマーカーをクリアして設定します。

これに近づく何かが良いと思います：

 <html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">

    var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };
  var shadow = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    size: new google.maps.Size(37, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(62.457171, 17.350953),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    setTimeout(function () {
        loadData(); 
    },500);


    function loadData()
    {
        //alert("Loading"); 
        var marker, i;

        var url = "http://blackcab.didair.se/api/drivers";
        var name;
        var lat;
        var lon;
        var locations;

        $.getJSON(url, function (response) {handleData(response)});
    }

    function handleData(response)
    {
        //alert(response);
        var n;
        for(n=0; n<response.drivers.length; n++)
        {
            name = response.drivers[n].name;
            //alert(name);
            lat = response.drivers[n].currentLat;
            lon = response.drivers[n].currentLon;
            var myLatLng = new google.maps.LatLng(lat,lon);
            var marker = new google.maps.Marker({
                position: myLatLng,
                shadow: shadow,
                icon:image,
                map: map,
                title: name,
                zIndex: 1
            });
        }   
    }



  </script>
</body>
</html>

ただし、以前のマーカーを削除し、新しいマーカーのみを追加し、情報ボックスを追加する必要があるという特定の例がありません。

見てください：http://jsfiddle.net/xu7wL/

于 2013-04-11T15:45:22.603 に答える