AngularJS

yılında Google Map Initialize Ben backbonejs gelen angularjs göç etmeyi düşünüyorum.AngularJS

Omurgasında, Google harita örneğini oluşturduğum noktadaki bir görünümü başlatabiliyorum. Daha sonra pan/zoom/etc yapabilir ve görünümler arasında geçiş yapabilir ve haritanın mevcut durumunu kaybetmem.

Verilen aşağıdaki kullanarak angularjs:

layout.html

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

map.html

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

Bir harita gayet işlemek için bir yönerge oluşturmak başardı. Sorun, harita görünümüne her geri döndüğümde haritayı yeniden yüklemesidir.

<map></map>

Yani Eğik hakkında öğreniyorum kadarıyla, ben MapController oluşturmak ve orada Haritayı başlatmak düşündüm. Başarı yok.

Alt satırda bir google haritayı async-init yapmalı ve veriyi yerel veya uzaktan vermem gerekecek VE her seferinde haritayı RELOADING konumuna getirmeden uygulamaya gidebiliyorsunuz.

Birisi doğru yaklaşımı önerebilir mi?

app.js ise:

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

services.js ise:

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

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

sizi :)

Andy Joslin öneri Başına girişimi ederiz 0 controllers.js ise

: map.html olarak

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>

alıyorum Hata: Bilinmeyen sağlayıcı: GoogleMapsProvider < - GoogleMaps

kaynak

2012-06-24 Larry Eitel

+1. Cevabı da bilmek isterim. –

Devam eden iyileştirmelerle bir proje [angular-google-maps] (https://github.com/LarryEitel/angular-google-maps) oluşturdum. [Canlı sürüm] 'e bakın (http://angular-google-maps.nodester.com/) –

Harika, zaten izleme listemde. :) –

görünümler oluşturmak yana ve Görünüm değiştiğinde denetleyicileri yok edin, haritalarınızı dat a başka bir yere devam etmek. Verileri saklayacak bir GoogleMap hizmeti oluşturmayı deneyin.

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

Bu çözümü beğenmezseniz, bunu yapmanın başka yolları da vardır.

kaynak

2012-06-25 21:13:42

Diğer seçenekleri kısaca özetleyebilir misiniz? Teşekkür ederim. –

Haritayı, hiçbir zaman yok edilmeyen $ doScope içinde oluşturabilir ve çocuk kapsamlarını devralabilirsiniz. Ayrıca ng-view kullanamazsınız, bu yüzden kapsamlar ve dom öğeleri yok edilmez, ancak bunun yerine gösterilir ve gizlenir, ancak kendi yönlendirme sisteminizi döndürmeniz gerekir. Ayrıca, açısal kontrolörlerinizin referansı olan sadece eski bir JavaScript nesnesi olan bir harita nesnesi yaratabilirsiniz (ancak bu hizmetin gerçekten kötü bir yoludur) –

Andy, Bazı fikirler önermeniz çok hoş. Açısal'da çok yeşilim. Bir örnek verebilme şansın var mı? Çamurda sıkışıp tekerleklerimi döndürüyorum. Teşekkür ederiz :) –

Bunu yok etmek yerine görünümü korumak için Backbone'da yapıyorum. Id = "container" ile bir divunuz olduğunu ve yönlendiricinizin karşılık gelen rotaları olduğunu varsayalım.Eğer eklemek zorunda senin endeksinde :

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

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

kaynak

2012-06-26 10:13:15 Jerry

Teşekkür ederim Jerry, çözümünüz angularjs yerine omurgada. –

İşte angularjs routeProvider ile harita API kullanarak benim çözüm

açısal-google-maps.min.js ve

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

});

})();

Son Fakat en az değil controller içerisinde:

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

})();

kaynak

2015-08-31 15:34:50 TacoEater

Merhaba Larry Eitel ve herkes, ben şu yaklaşımı vardır: "

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 yılında Sonra

İlk olarak, bazı küresel değişkenler oluşturmak için ihtiyaç yok etme işlevi "geçerli harita durumunu başka bir global değişkene kaydeder, daha sonra, görünüm yeniden oluşturulduğunda başka bir harita örneği oluşturmamız gerekmez.

Başka bir harita örneği oluşturmak, bellek sızıntısına neden olabilir ve her defasında görünüm yeniden oluşturulduğunda Google haritaları API kullanımını artırır.

Saygılarımızla

kaynak

2017-04-15 01:05:11

cevap

İlgili konular