AngularJS -根据所选择的项目改变JSON中google maps指令的作用域

AngularJS - change scope of a google maps directive from JSON based on item selected

本文关键字：google maps 作用域 指令 JSON 项目 -根 选择 AngularJS 改变      更新时间：2023-09-26

我以前从这里得到了一个答案，我如何根据所选的项目填充详细信息form json。

请参阅这里的一个例子，我正在努力实现http://plnkr.co/edit/VQ2ZPY2PeLVySoCNQh92?p=preview

如何根据列表组中选择的项目更改Google地图指令中的纬度和经度值?

这是我目前为止写的:

html: 

<body>
  <div ng-controller=ItemsController>
    <h3>Test</h3>
    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <ul class="list-group">
            <a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
          </ul>
        </div>
      </div>
      <div class="col-md-8">
        <div class="panel panel-default">
          <h2>Name: {{selected.name}}</h2>
          <my-maps id="map-canvas"></my-maps><br />
          <br />Address Line 1: {{selected.addressLine1}}
          <br />Address Line 2: {{selected.addressLine2}}
          <br />Suburb: {{selected.suburb}}
          <br />Phone: {{selected.contactPhone}}
          <br />Email: {{selected.emailAddress}}
        </div>
      </div>
    </div>
  </div>
</body>

脚本:

var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
  var itemsFactory ={
    itemDetails: function() {
      return $http(
      {
        url: "mockItems.json",
        method: "GET",
      })
      .then(function (response) {
        return response.data;
        });
      }
    };
    return itemsFactory;
}]);

myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
  var promise = itemsFactory.itemDetails();
    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
    $scope.select = function(item) {
      $scope.selected = item;
    };
    $scope.selected = {};
}]);

myItemsApp.directive("myMaps", function() {
    return {
                restrict: 'E',
                template: '<div></div>',
                replace: true,
                link: function (scope, element, attrs) {
                  var lat = -31.9543365;
                  var lon = 115.894217;
                  var myLatLng = new google.maps.LatLng(lat, lon);
                  var mapOptions = {
                        center: myLatLng,
                        zoom: 12,
                        myTypeId: google.maps.MapTypeId.ROADMAP
                  };
                  var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);
                  var marker = new google.maps.Marker(
                        {
                            position: myLatLng,
                            map: map,
                            title: "my town"
                        }
                  );
                    marker.setMap(map);
                }
            };
});
json: 

[
   {
      "$id":"1",
      "name":"Test itemName 1",
      "themeName":"ASD",
      "addressLine1":"18 Banksia Street",
      "addressLine2":null,
      "suburb":"Heidelberg",
      "state":"VIC",
      "postalCode":"3084",
      "contactPhone":"+61 3 123456",
      "emailAddress":"qwerty.it@xyz.com",
      "latitude":-37.759202,
      "longitude":145.0651
   },
   {
      "$id":"2",
      "name":"Test itemName 2",
      "themeName":"WER",
      "addressLine1":"11 Riverview Place",
      "addressLine2":"Metroplex on Gateway",
      "suburb":"Murarrie",
      "state":"QLD",
      "postalCode":"4172",
      "contactPhone":"1300 73123456",
      "emailAddress":"asdfg.it@xyz.com",
      "latitude":-27.449425,
      "longitude":153.100814
   },
   {
      "$id":"3",
      "name":"Test itemName 3",
      "themeName":"ERT",
      "addressLine1":"60 Waterloo Road",
      "addressLine2":null,
      "suburb":"North Ryde",
      "state":"NSW",
      "postalCode":"2113",
      "contactPhone":"123456",
      "emailAddress":"zxcvb.it@xyz.com",
      "latitude":-33.7816183,
      "longitude":151.1235765
   }
]

在selected值上创建一个$watch er，然后在每次改变时重新配置和重新绘制地图:

link: function (scope, element, attrs) {
    scope.$watchCollection('selected', function() {
        var lat = scope.selected.latitude || -31.9543365; // defaults if no 
        var lon = scope.selected.longitude || 115.894217; // value on scope.selected
        var myLatLng = new google.maps.LatLng(lat, lon);
        var mapOptions = {
            center: myLatLng,
            zoom: 12,
            myTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "my town"
        });
        marker.setMap(map);
    });
}

演示的分支

1-指令中的lat和lon必须像这样来自你的作用域:

: 

     $scope.position = {};
     $scope.position.lat =-31.9543365;//initializing your map with this position
     $scope.position.lon = 115.894217;

在你的指令:

     link: function (scope, element, attrs) {
              var lat = scope.position.lat*1; // you must use * 1 , because they come from an object in your controller so javascript thinks they are Strings , not floats:p
              var lon = scope.position.lon*1;
              var myLatLng = new google.maps.LatLng(lat, lon);
            .
            .                
            .

和控制器中的

            $scope.select = function(item){
              $scope.position.lat = item.latitude;  
              $scope.position.lat = item.longitude;
              $scope.selected = item;
            }

我想应该可以了

相关文章：