Google MapをAngularJSで初期化する

backbonejsからangularjsへの移行を検討しています。Google MapをAngularJSで初期化する

バックボーンで、私はどの時点で私はGoogleマップのインスタンスを作成するビューを初期化することができます。私はパン/ズーム/ etcとビューを切り替えることができますし、地図の現在の状態を失うことはありません。私はちょうど罰金マップをレンダリングするためのディレクティブを作成することができました

layout.html

<body> 
    <div class="container-fluid" ng-view></div>

map.html

<div id="map_canvas" ng-controller="MapCtrl"></div>

：

は、以下の使用angularjsを考えます。問題は、マップビューに戻るたびに地図を再読み込みすることです。

<map></map>

私がAngularについて学んでいることから、私はMapControllerを作成し、そこでマップを初期化すると考えました。失敗。

ボトムラインGoogleマップを非同期に初期化し、ローカルまたはリモートにデータをプッシュし、毎回地図を最初から再読み込みせずにアプリをナビゲートできるようにする必要があります。

誰かが正しいアプローチを提案できますか？

ありがとうございました:)アンディ・ジョスリン提案パー

試み： app.jsで

：services.jsで

// Generated by CoffeeScript 1.3.3 
(function() { 
    "use strict"; 

    angular.module("ofm", ["ofm.filters", "GoogleMaps", "ofm.directives"]).config([ 
    "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) { 
     $routeProvider.when("/", { 
     templateUrl: "partials/home" 
     }).when("/map", { 
     templateUrl: "partials/map", 
     controller: MapCtrl 
     }).otherwise({ 
     redirectTo: "/" 
     }); 
     return $locationProvider.html5Mode(true); 
    } 
    ]); 

}).call(this);

：

angular.module('GoogleMaps', []). 
    factory('wasMapInitialized', function() { 
    console.log("inside service"); 
    var maps = 0; 

    if (!maps) { 
     maps += 1; 
     return 0; 
    } else { 
     return 1; 
    } 
    });

を0 controllers.jsで

：map.htmlで

function MapCtrl($scope) { 
    if (!GoogleMaps.wasMapInitialized()) { 
    var lat = 46.87916; 
    var lng = -3.32910; 
    var map_id = '#map'; 
    initialize(map_id, lat, lng); 
    } 
    function initialize(map_id, lat, lng) { 
    var myOptions = { 
     zoom : 8, 
     center : new google.maps.LatLng(lat, lng), 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map($(map_id)[0], myOptions); 
    } 
}

が

#map <div ng-controller="MapCtrl"></div>

は私が得るエラー：不明なプロバイダ：GoogleMapsProvider < - Googleマップ

出典

2012-06-24 Larry Eitel

+1です。答えも知りたいですか？ –

私は、進行中の改善を伴うプロジェクト[angular-google-maps]（https://github.com/LarryEitel/angular-google-maps）を作成しました。 [ライブバージョン]（http://angular-google-maps.nodester.com/）を参照してください –

素晴らしい、すでに私のウォッチリストに。 :) –

ビューを作成しているためとビューが変わったときにコントローラを破壊する、あなたのマップdatどこかに残るデータを格納するGoogleMapサービスを作成してみてください。

myApp.factory('GoogleMaps', function() { 
    var maps = {}; 

    function addMap(mapId) { 
    maps[mapId] = {}; 
    } 
    function getMap(mapId) { 
    if (!maps[mapId]) addMap(mapId); 
    return maps[mapId]; 
    } 

    return { 
    addMap: addMap, 
    getMap: getMap 
    } 
}); 

function MyController($scope, GoogleMaps) { 
    //Each time the view is switched to this, retrieve supermanMap 
    $scope.map = GoogleMaps.getMap('supermanMap'); 

    $scope.editMap = function() { 
    $scope.map.kryptonite = true; 
    }; 
}

この解決策が嫌いなら、他の方法もあります。

出典

2012-06-25 21:13:42

他のオプションの概要をすぐに教えてください。ありがとうございました。 –

マップは$ rootScopeに作成できます。これは破壊されることはなく、子スコープに継承されます。また、ng-viewを使用することもできないので、スコープとdom要素は破壊されずに作成されず、代わりに表示され、隠されますが、独自のルーティングシステムを起動する必要があります。また、あなたの角度コントローラが参照する角度以外の単純な古いJavaScriptオブジェクトであるマップのものを作成することもできます（これは実際にサービスを行うには貧弱な方法です）。 –

Andy、いくつかのアイデアを提案してくれてありがとうございます。私はAngularでとても緑色です。あなたは事例を抜き出すことができますか？私は泥の中にこぼれていて、私の車輪を回転させている。ありがとうございました:) –

これは私がバックボーンでそれを破壊する代わりにビューを維持するために行っていることです。 id = "container"のdivがあり、ルータに対応するルートがあるとします。

routes: { 
    "":"home", 
    "map": "showMap" 
}, 

showMap: function() { 
    $("#container").children().detach(); 
    if(!this.mapView) { 
     this.mapView = new MapView(); 
     this.mapView.render(); 
    } 
    $("#container").html(this.mapView.el); 
}

出典

2012-06-26 10:13:15 Jerry

をキャッシュします。しかし、あなたの解決策はangularjsではなくバックボーンにあります。 –

はここAngularjs routeProviderとマップのAPIを使用するための私のソリューションです：あなたが追加する必要があなたのインデックスに：

角度-グーグル-maps.min.js とlodash.min.js

application.jsで

：

(function() { 

var app = angular.module("myApp", ["ngRoute", "uiGmapgoogle-maps"]); 


app.config(function(uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
     key: 'YOUR KEY HERE', 
     v: '3.17', 
     libraries: 'weather,geometry,visualization' 
    }); 
}); 

app.config(function($routeProvider) { 
    $routeProvider 
     .when("/home", { 
      templateUrl: "home.html", 
      controller: "HomeController" 
     }) 
     .when("/workwith", { 
      templateUrl: "workwith.html", 
      controller: "WorkwithController" 
     }) 




    .otherwise({ 
     redirectTo: "/home" 
    }); 

});

}）（）;

なく、少なくとも最後に、あなたのコントローラで：

(function() { 
var app = angular.module("myApp"); 
var MyController = function($scope, $http, $log, $location, $routeParams, uiGmapGoogleMapApi) { 
    $log.info("MyController"); 
    $log.info($routeParams); 

    // Define variables for our Map object 
    var areaLat = 44.2126995, 
     areaLng = -100.2471641, 
     areaZoom = 3; 

    uiGmapGoogleMapApi.then(function(maps) { 
     $scope.map = { 
      center: { 
       latitude: areaLat, 
       longitude: areaLng 
      }, 
      zoom: areaZoom 
     }; 
     $scope.options = { 
      scrollwheel: false 
     }; 
    });  
}; 
app.controller("MyController", MyController);

}）（）;

出典

2015-08-31 15:34:50 TacoEater

こんにちはラリー・アイテル、みんな、私は次のようなアプローチがあります：「

function MapCtrl($scope) { 
    var lat = 46.87916; 
    var lng = -3.32910; 
    var map_id = '#map'; 

    if (flag==0) 
     initMap(mapId, lat, lng); 
    else 
     reinitMap(mapId); 

    function initMap(map_id, lat, lng) { 
    var myOptions = { 
     zoom : 8, 
     center : new google.maps.LatLng(lat, lng), 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 
    mapGlobal = new google.maps.Map($(map_id)[0], myOptions); 

    if (typeof mapGlobal != 'undefined') 
     flag=1; 
    } 

    function reinitMap(mapId){ 
    $(mapId)[0].append(CurrentmapNode); 
    } 

    $scope.$on("$destroy", function(){ 
     CurrentmapNode = mapGlobal.getDiv(); //save current map in an auxiliar variable 
    }); 

}

：

var mapGlobal, flag=0, CurrentmapNode;

Controllerで次に

：

まず、我々はいくつかのグローバル変数を作成する必要がありますon destroy "関数は、現在のマップ状態を別のグローバル変数に保存します。その後、ビューが再作成されると、別のマップインスタンスを作成する必要はありません。

別のマップインスタンスを作成すると、メモリリークが発生し、ビューを再作成するたびにGoogleマップAPIの使用量を増やすことができます。

お礼

出典

2017-04-15 01:05:11

Google MapをAngularJSで初期化する

答えて

関連する問題