Khởi tạo Google Map trong AngularJS

Tôi đang cân nhắc di chuyển từ backbonej sang angularjs.Khởi tạo Google Map trong AngularJS

Trong xương sống, tôi có thể khởi tạo chế độ xem tại điểm mà tôi tạo một bản sao của bản đồ google. Sau đó tôi có thể xoay/thu phóng/v.v ... và chuyển đổi giữa các chế độ xem và không làm mất trạng thái hiện tại của bản đồ.

Với angularjs sử dụng sau đây:

layout.html

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

map.html

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

tôi đã có thể tạo ra một chỉ thị để vẽ lại một bản đồ tốt. Vấn đề là nó tải lại bản đồ mỗi khi tôi chuyển về chế độ xem bản đồ.

<map></map>

Vì vậy, từ những gì tôi đang học về Góc, tôi đã tìm tôi sẽ tạo MapController và khởi tạo bản đồ ở đó. Không thành công.

Điểm mấu chốt là tôi cần phải đồng bộ hóa-init bản đồ google và đẩy dữ liệu vào bản đồ cục bộ hoặc từ xa VÀ có thể điều hướng ứng dụng mà không cần RELOADING bản đồ từ đầu mỗi lần.

Ai đó có thể đề xuất phương pháp tiếp cận chính xác không?

Cảm ơn bạn :)

Cố gắng mỗi Andy Joslin gợi ý:

Trong app.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);

Trong services.js:

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

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

Trong controllers.js:

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); 
    } 
}

Trong map.html

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

tôi nhận được Lỗi: Không rõ nhà cung cấp: GoogleMapsProvider < - GoogleMaps

Nguồn

2012-06-24 Larry Eitel

+1. Cũng muốn biết câu trả lời. –

Tôi đã tạo một dự án [angular-google-maps] (https://github.com/LarryEitel/angular-google-maps) với những cải tiến liên tục. Xem [phiên bản trực tiếp] (http://angular-google-maps.nodester.com/) –

Tuyệt vời, đã có trong danh sách theo dõi của tôi. :) –

Từ quan điểm tạo và tiêu diệt bộ điều khiển khi xem thay đổi, bạn muốn bản đồ của bạn dat một để tồn tại ở một nơi khác. Hãy thử tạo một dịch vụ GoogleMap sẽ lưu trữ dữ liệu.

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; 
    }; 
}

Nếu bạn không thích giải pháp này, cũng có một số cách khác để thực hiện.

Nguồn

2012-06-25 21:13:42

Bạn có thể phác thảo nhanh các tùy chọn khác (chỉ cần đặt tên cho chúng) không? Cảm ơn bạn. –

Bạn có thể tạo bản đồ trong $ rootScope, không bao giờ bị hủy và có phạm vi con kế thừa nó. Bạn cũng không thể sử dụng ng-view để các phạm vi và phần tử dom không được tạo ra bị phá hủy, nhưng thay vào đó được hiển thị và ẩn, nhưng bạn phải cuộn hệ thống định tuyến của riêng bạn. Bạn cũng có thể tạo một thứ bản đồ chỉ là một đối tượng JavaScript cũ bên ngoài góc cạnh mà các bộ điều khiển góc của bạn tham chiếu (nhưng đây thực sự là một cách làm việc kém) –

Andy, Rất hay để gợi ý một số ý tưởng. Tôi rất xanh ở Angular. Bất kỳ cơ hội nào bạn có thể đưa ra một ví dụ? Tôi bị mắc kẹt trong bùn và quay bánh xe của tôi. Cảm ơn bạn :) –

Đây là những gì tôi đang làm trong Backbone để giữ chế độ xem thay vì phá hủy nó. Giả sử bạn có một div với id = "container" và router của bạn có các tuyến tương ứng.

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

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

Nguồn

2012-06-26 10:13:15 Jerry

Cảm ơn bạn Jerry tuy nhiên, giải pháp của bạn là trong xương sống chứ không phải là angularjs. –

Đây là giải pháp của tôi để sử dụng api bản đồ với Angularjs routeProvider: trong index của bạn, bạn cần phải thêm:

góc-google-maps.min.js và lodash.min.js

trong 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" 
    }); 

});

})();

cuối Nhưng không kém phần quan trong điều khiển của bạn:

(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);

})();

Nguồn

2015-08-31 15:34:50 TacoEater

Hi Larry Eitel và tất cả mọi người, tôi có phương pháp sau đây:

Đầu tiên, chúng ta cần phải tạo ra một số biến toàn cục:

var mapGlobal, flag=0, CurrentmapNode;

Sau đó, trong Controller:

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 
    }); 

}

Các " về phá hủy "chức năng lưu trạng thái bản đồ hiện tại trong một biến toàn cầu khác, khi đó, khi xem được tạo lại, chúng ta không cần phải tạo một thể hiện bản đồ khác.

Tạo một bản đồ khác có thể gây rò rỉ bộ nhớ và tăng mức sử dụng API bản đồ của Google mỗi lần xem lại được tạo lại.

Trân trọng

Nguồn

2017-04-15 01:05:11

Khởi tạo Google Map trong AngularJS

Trả lời

Các vấn đề liên quan