は角およびHTTP

私は本当にこのための解決策を見つけることではないのです

を使用して動的なGoogleマップのマーカーを実装し、おそらく非常に簡単です。 htmlテーブルのng-repeatを指定したJsonデータは正常に動作します。は角およびHTTP

[ 
{ 
    "Lat": 16.374, 
    "Long": 48.212, 
    "Timestamp": "2017-01-07/13:31:56", 
    "Downstream": 20.79852450876752, 
    "Upstream": 20.87613636972708, 
    "Category": 5 
},

は、だから今、私はこれらの位置でLatutudeと経度の値とディスプレイを取得したい上流、下流にタイムスタンプ付きのonClickテキストとGoogleマップのマーカー：

はJSONは次のようになります。

私の現在のHTMLやGoogleマップコードあなたは以下の見つけることができます：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
     <script src="../js/speedtestTestController.js"></script> 

     <style type="text/css"> 
      html { height: 50% } 
      body { height: 100%; margin: 0; padding: 0 } 
      #map_canvas { height: 40%; width: 40%; } 
     </style> 


     <script type="text/javascript"> 



      function initialize() { 
       var mapOptions = { 
        zoom: 11, 
        center: new google.maps.LatLng(48.209500, 16.370691), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

       var marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(48.209500, 16.370691), 
        animation:google.maps.Animation.Bounce, 
        map: map, 
       // icon: '../images/Speed.png' 
       }); 

      } 

      function loadScript() { 
       var script = document.createElement("script"); 
       script.type = "text/javascript"; 
       script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyBv_SRg4EiNNN8RJZeQ_y78h2j804msLPA&sensor=true&callback=initialize"; 
       document.body.appendChild(script); 

      } 



      window.onload = loadScript; 
     </script> 




     </head> 
    <body ng-app="testApp" > 

    <div id="map_canvas" style="width:100%; height:100%"></div> 



    </body> 
    </html>

あなたが動的にJSONデータから、このようなマーカーを生成するためのソリューションを持っていますか？

ありがとうございます！ここで

出典

2017-01-07 coderprt

は、JSONファイルからマーカーデータをロードし、地図上に表示する方法を実証したサンプルです：

angular.module('mapApp', []) 
 

 
    .controller("mapCtrl", function ($scope, $http) { 
 
     $scope.loadData = function() { 
 
      var url = "https://gist.githubusercontent.com/vgrem/4c3db2767a4345e2f7b0ee711c38097d/raw/data.json"; 
 
      return $http.get(url).then(function (response) { 
 
       return response.data; 
 
      }); 
 
     }; 
 

 

 
     $scope.initMap = function (data) { 
 
      var mapOptions = { 
 
       zoom: 4, 
 
       center: new google.maps.LatLng(48.209500, 16.370691), 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      } 
 
      var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 

 
      data.forEach(function (item) { 
 
       var marker = new google.maps.Marker({ 
 
        position: new google.maps.LatLng(item.Lat, item.Lng), 
 
        animation: google.maps.Animation.Bounce, 
 
        map: map 
 
       }); 
 

 
      }); 
 
     }; 
 

 

 
     $scope.loadData() 
 
      .then($scope.initMap); 
 

 
    });

#map_canvas { 
 
    height: 420px; 
 
    width: 100%; 
 
}

<script src="https://maps.google.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
<div ng-app="mapApp" ng-controller="mapCtrl"> 
 
    <div id="map_canvas"></div> 
 
</div>

出典

2017-01-24 11:03:26

答えて

関連する問題