如何在不同视图中使用地图

时间:2015-04-14 12:57:01

标签: angularjs google-maps controller ionic

我试图在不同的视图中显示不同的地图但是在1个地图视图上收费,切换到另一个地图未加载,启动浏览器没有错误因此我无法决定因为我无法继续显示其他地图。我做的如下:

$scope.cargarUbicacion = function () {
if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
          latitud_actual = position.coords.latitude; 
          longitud_actual = position.coords.longitude;
          console.log(latitud_actual);
          console.log(longitud_actual);
          var mapOptions = {
              center: new google.maps.LatLng(latitud_actual, longitud_actual),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false
          };
          map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
          $scope.setMarker(map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');
      });
    }
  } 
  $scope.setMarker = function(map, position, title, content) {
  var marker;
  var markerOptions = {
      position: position,
      map: map,
      title: title,
      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
  };

  marker = new google.maps.Marker(markerOptions);
  markers.push(marker); // add marker to array

  google.maps.event.addListener(marker, 'click', function () {
      // close window if not undefined
      if (infoWindow !== void 0) {
          infoWindow.close();
      }
      // create new window
      var infoWindowOptions = {
          content: content
      };
      infoWindow = new google.maps.InfoWindow(infoWindowOptions);
      infoWindow.open(map, marker);
  });
}

我在多个控制器中使用此代码,我的想法是封装的,可以在几个视图中占用相同的代码一次。每当我更改id映射以避免该问题时,认为这是导致未加载地图的原因。

知道如何做我需要的或无法加载地图吗?

谢谢。

1 个答案:

答案 0 :(得分:0)

我个人做以下事情:

您要重用的代码将其放入全局变量中,例如: 然后进入您的控件,您可以使用此mapExtend

扩展它

    global.MapExtend = function($scope, $rootScope, leafletData) {

// ... all your functions to reuse
      };

// In your main controler, extend it with your map capabilities with angular.extend
angular.extend(myCtrl, new MapExtend($scope, $rootScope, leafletData));