Bing Map V8 Cluster Passリアルタイムデータ

私はBingマップから始めています。公式文書にはいくつかの例があります。 Bing Map V8 Cluster Passリアルタイムデータ

以下

mapData = [{"Name":"Point: 0","Latitude":22.0827,"Longitude":80.2707}, 
       {"Name":"Point: 1","Latitude":24.0827,"Longitude":80.2707}, 
       {"Name":"Point: 2","Latitude":26.0827,"Longitude":80.2707}, 
       {"Name":"Point: 3","Latitude":28.0827,"Longitude":80.2707}, 
       {"Name":"Point: 4","Latitude":20.0827,"Longitude":80.2707}, 
       {"Name":"Point: 5","Latitude":22.0827,"Longitude":82.2707}, 
       {"Name":"Point: 6","Latitude":30.0827,"Longitude":80.2707}, 
       {"Name":"Point: 7","Latitude":22.0827,"Longitude":84.2707}, 
       {"Name":"Point: 8","Latitude":32.0827,"Longitude":84.2707}, 
       {"Name":"Point: 9","Latitude":18.0827,"Longitude":80.2707}];

のようなリアルタイムデータのJSONでTestDataGeneratorデータを交換する方法上記のBingマップクラスタの例ではBing map V8 official documentation

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type='text/javascript' 
      src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
    <script type="text/javascript"> 
    var map, clusterLayer; 

    function GetMap() { 
     map = new Microsoft.Maps.Map('#myMap',{ 
      credentials: 'Your Bing Maps Key', 
      zoom: 3 
     }); 

     Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function() { 
      //Generate 3000 random pushpins in the map view. 
      var pins = Microsoft.Maps.TestDataGenerator.getPushpins(3000, map.getBounds()); 

      //Create a ClusterLayer with options and add it to the map. 
      clusterLayer = new Microsoft.Maps.ClusterLayer(pins, { 
       clusteredPinCallback: customizeClusteredPin 
      }); 
      map.layers.insert(clusterLayer); 
     }); 
    } 

    function customizeClusteredPin(cluster) { 
      //Add click event to clustered pushpin 
     Microsoft.Maps.Events.addHandler(cluster, 'click', clusterClicked); 
    } 

    function clusterClicked(e) { 
     if (e.target.containedPushpins) { 
      var locs = []; 
      for (var i = 0, len = e.target.containedPushpins.length; i < len; i++) { 
       //Get the location of each pushpin. 
       locs.push(e.target.containedPushpins[i].getLocation()); 
      } 

      //Create a bounding box for the pushpins. 
      var bounds = Microsoft.Maps.LocationRect.fromLocations(locs); 

      //Zoom into the bounding box of the cluster. 
      //Add a padding to compensate for the pixel area of the pushpins. 
      map.setView({ bounds: bounds, padding: 100 }); 
     } 
    } 
    </script> 
</head> 
<body> 
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div> 
</body> 
</html>

から

例私はClusterLayerにオブジェクト上を通過するとき、私は次のようになっていますエラー

Uncaught TypeError: i[t].getLocation is not a function(…)

出典

2016-12-01 ShaMoh

ループする必要がありますあなたのデータを使って、それをプッシュピンに変換します。コードサンプルは次のとおりです。

var pins = []; 

for(var i = 0;i < mapData.length;i++){ 
    var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(mapData[i].Latitude, mapData[i].Longitude)); 

    //Store the original data object in the pushpins metadata so that you can access other properties like Name. 
    pin.metedata = mapData[i]; 

    pins.push(pin); 
} 

//Now "pins" is an array of pushpins. Add them to the map or to the clustering layer.

出典

2016-12-01 17:19:44 rbrundritt

Bing Map V8 Cluster Passリアルタイムデータ

答えて

関連する問題