Question

我正在尝试在离子项目中添加谷歌地图。除此之外，我希望谷歌地图中的所有标记都适合所有屏幕。我不知道哪里错了。我在这里提到https://developers.google.com/maps/documentation/javascript/reference?csw=1#LatLngBounds

这是代码

HTML：index.html

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp</script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script

HTML：home.html

<ion-content>   
   <map on-create="mapCreated(map)"></map>
</ion-content>

JS：directives.js

angular.module('starter.directives', [])

    .directive('map', function() {
      return {
        restrict: 'E',
        scope: {
      onCreate: '&'
    },
    link: function ($scope, $element, $attr) {
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(43.07493, -89.381388),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($element[0], mapOptions);

        $scope.onCreate({map: map});

        // Stop the side bar from dragging when mousedown/tapdown on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });
      }

      if (document.readyState === "complete") {
        initialize();
      } else {
        google.maps.event.addDomListener(window, 'load', initialize);
      }
    }
  }
});

JS：app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])

JS：controllers.js

$scope.mapCreated = function (map) {
        $scope.map = map;

        var pos = new Array (new google.maps.LatLng(3.050511,101.687833), new google.maps.LatLng(3.122847,101.676846), new google.maps.LatLng(3.078409,101.608025), new google.maps.LatLng(2.932928,101.642603));

        //Create marker
        var createMarker = function (pos, icon) {
            console.log("create marker");
            var marker = new google.maps.Marker({
                position: pos,
                map: map,
                icon: icon,
            });
        }

        var getAllMarkers = function(){
            var bounds = new google.maps.LatLngBounds();
            for(var i=0; i<pos.length; i++){
                bounds.extend(pos[i]);
                createMarker(pos[i], 'https://maps.google.com/mapfiles/ms/icons/red-dot.png');
            }

            $scope.map.fitBounds (bounds);
        }

        getAllMarkers();
        $scope.map.setCenter(pos[0]);
    };

代码输出：图片1

这是我想要的输出：图片2

Answer 1

我建议使用ngMap或其他Angular-module（例如angular-google-map）。

以下是一个例子：

var app = angular.module('myApp', ['ionic', 'ngMap']);

app.controller('MapCtrl', ['$scope', '$http', '$state', 'NgMap', '$timeout', 
function($scope, $http, $state, NgMap, $timeout) {
  
  $scope.zoom = 10;
  
  $scope.cx = {
    "latitude": 3.050511, "longitude": 101.687833
  };
  
  $scope.pos = [{"lat": 3.050511,"lng": 101.687833},
  {"lat": 3.122847,"lng": 101.676846}, 
  {"lat": 3.078409,"lng": 101.608025}, 
  {"lat": 2.932928,"lng": 101.642603}
  ];
  
  NgMap.getMap().then(function(map) {
    $scope.map = map;
  });

}])

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <title>Simle Map</title>
  <meta name="description" content="Simple Map" />
  <meta name="keywords" content="ng-map,AngularJS,center" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="app.js"></script>

  <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">

</head>

<body ng-controller="MapCtrl">
  <ion-header-bar class="bar-dark">
    <h1 class="title">Simple Map in Ionic</h1>
  </ion-header-bar>
  <ion-content>

    <div class="card">
      <div class="item item-divider">
        NgMap
      </div>
      <ng-map center="{{cx.latitude}}, {{cx.longitude}}" zoom="{{zoom}}" style="width:100%; height: 100%;">
        <marker ng-repeat="p in pos track by $index" position="{{p.lat}}, {{p.lng}}"></marker>
      </ng-map>
      <pre>cx = {{cx|json}}</pre>
      <pre>pos = {{pos|json}}</pre>
    </div>

  </ion-content>
  <ion-footer-bar class="bar-dark">
    Footer
  </ion-footer-bar>

</body>

</html>

Answer 2

以下是演示创建地图后如何通知控制器的更改列表。

适用于directive：

$scope.$emit('onCreate',map);

适用于controller：

$scope.$on('onCreate', function (event, map) {
     $scope.map = map;
     //the remaining code goes here... 
});

Demo on CodePen

应用google.maps.LatLngBounds（）但不能正常工作 - Ionic

2 个答案: