0

私はAngularを初めて使用するので、ここでやろうとしていることが正しいかどうかさえわかりません。そうでない場合は、正しい方向に向けてください。

私がしたいこと：

JSONを使用して外部マップデータを取得し、angular-google-mapsをデータにロードしています。私の JSON には、名前、緯度、経度を含む約 100 の場所があります。Angular を使用してそのデータをループし、各場所のマップにマーカーを配置したいと考えています。

HTML

<body ng-controller="ExampleController">
  <input type="text" ng-model="data.message">
  <li class="places" ng-repeat="place in places">
      <p class="link">{{place.name}}</p>
      <p>{{place.lat}}</p>
      <p>{{place.lng}}</p>

  <div class="google-map" 
    center="centerProperty"
    zoom="zoomProperty" 
    markers="markersProperty"
    latitude="clickedLatitudeProperty"
    longitude="clickedLongitudeProperty"
    mark-click="true"
    draggable="true"
    style="height: 500px; width: 80%; ">
  </div>
</li>

</body>

Javascript

(function () {
    var module = angular.module("angular-google-maps-example", ["google-maps"]);
}());

function ExampleController ($scope, $http) {
  $http.get('json/map-data.json').success(function(data) {
    $scope.places = data;
  });

    angular.extend($scope, {

        /** the initial center of the map */
        centerProperty: {
            lat: 45,
            lng: -73
        },

        /** the initial zoom level of the map */
        zoomProperty: 8,

        /** list of markers to put in the map */
        markersProperty: [ {
                latitude: 45,
                longitude: -74
            }],

        // These 2 properties will be set when clicking on the map
        clickedLatitudeProperty: null,  
        clickedLongitudeProperty: null,
    });
}

機能しない理由

明らかに、私は少し頭を悩ませています.Javascriptにアクセスする方法を見つけよう{{place.lat}}と{{place.lng}}していmarkersProperty:ます。どうにかしてこれらの値をmarkerProperty配列にプッシュできますか? これを達成するための最良の方法は何ですか？

4

1 に答える 1