AngularJS

में Google मानचित्र प्रारंभ करें I backbonejs से angularjs में माइग्रेट करने पर विचार कर रहा हूं।AngularJS

रीढ़ की हड्डी में मैं एक दृश्य शुरू करने में सक्षम हूं जिस बिंदु पर मैं Google मानचित्र का एक उदाहरण बना देता हूं। मैं फिर पैन/ज़ूम/आदि कर सकता हूं और विचारों के बीच स्विच कर सकता हूं और मानचित्र की वर्तमान स्थिति को खो नहीं सकता।

को देखते हुए निम्नलिखित का उपयोग कर AngularJS:

layout.html

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

map.html

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

मैं एक नक्शे के ठीक रेंडर करने के लिए एक निर्देश बनाने के लिए कर रहा था। समस्या यह है कि जब भी मैं मानचित्र दृश्य पर वापस स्विच करता हूं तो यह मानचित्र को फिर से लोड करता है।

<map></map>

तो मैं किस बारे में कोणीय सीख रहा हूँ, मैं सोचा मैं एक MapController बना सकते हैं और मानचित्र आरंभ वहाँ होगा। कोई सफलता नहीं।

नीचे की रेखा मुझे Google मानचित्र में एसिंक-इनिट करने की आवश्यकता है और स्थानीय रूप से या दूरस्थ रूप से डेटा को पुश करने की आवश्यकता है और हर बार स्क्रैच से मानचित्र को रिवॉल्ड किए बिना ऐप पर नेविगेट करने में सक्षम हो।

क्या कोई सही दृष्टिकोण सुझा सकता है?

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

services.js में:

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

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

आप :)

प्रति एंडी Joslin सुझाव का प्रयास धन्यवाद

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

map.html में

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

मैं त्रुटि: अज्ञात प्रदाता: GoogleMapsProvider < - GoogleMaps

स्रोत

2012-06-24 Larry Eitel

+1। जवाब भी जानना चाहेंगे। –

मैंने निरंतर सुधार के साथ एक परियोजना [कोणीय-Google-मानचित्र] (https://github.com/LarryEitel/angular-google-maps) बनाई है। [लाइव संस्करण] देखें (http://angular-google-maps.nodester.com/) –

ग्रेट, पहले से ही मेरी घड़ी सूची पर। :) –

के बाद से दृश्य बनाने और जब दृश्य बदलता है तो नियंत्रकों को नष्ट कर दें, आप अपने नक्शे को डेट करना चाहते हैं एक और कहीं भी जारी रखने के लिए। एक 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

क्या आप जल्द ही अन्य विकल्पों को रेखांकित कर सकते हैं (बस उन्हें नाम दे रहे हैं)? धन्यवाद। –

आप रूट रूटस्कोप में नक्शा बना सकते हैं, जिसे कभी नष्ट नहीं किया जाता है, और बच्चे के स्कोप इसे प्राप्त करते हैं। आप एनजी-व्यू का भी उपयोग नहीं कर सकते हैं, इसलिए स्कॉप्स और डोम तत्व नष्ट नहीं किए जाते हैं, बल्कि इसके बजाय दिखाए जाते हैं और छुपाए जाते हैं, लेकिन आपको अपनी रूटिंग सिस्टम रोल करना होगा। आप नक्शा चीज भी बना सकते हैं जो कोणीय के बाहर एक सादा पुरानी जावास्क्रिप्ट ऑब्जेक्ट है जो आपके कोणीय नियंत्रक संदर्भ (लेकिन यह वास्तव में सेवा करने का एक खराब तरीका है) –

एंडी, कुछ विचारों का सुझाव देने के लिए आप में बहुत अच्छा लगा। मैं कोणीय में बहुत हरा हूँ। कोई मौका आप एक उदाहरण बाहर कर सकते हैं? मैं मिट्टी में फंस गया हूं और अपने पहियों को कताई कर रहा हूं। धन्यवाद :) –

मैं बैकबोन में ऐसा कर रहा हूं ताकि इसे नष्ट करने के बजाय दृश्य को बनाए रखा जा सके। मान लीजिए कि आपके पास आईडी = "कंटेनर" वाला 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 routeProvider साथ मानचित्र API का उपयोग के लिए मेरे समाधान: अपने सूचकांक में आप जोड़ने के लिए:

कोणीय-google-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

हाय लैरी Eitel और हर कोई, मैं निम्नलिखित दृष्टिकोण है:

var mapGlobal, flag=0, CurrentmapNode;

फिर 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 
    }); 

}

सबसे पहले, हम कुछ वैश्विक चर बनाने की जरूरत नष्ट करने पर "फ़ंक्शन किसी अन्य वैश्विक चर में वर्तमान मानचित्र स्थिति सहेजता है, फिर, जब दृश्य पुनर्निर्मित होता है, तो हमें एक और नक्शा उदाहरण बनाने की आवश्यकता नहीं होती है।

एक और नक्शा उदाहरण बनाना मेमोरी रिसाव का कारण बन सकता है और Google मानचित्र एपीआई उपयोग को हर बार देखने के लिए बढ़ाया जा सकता है।

सर्वश्रेष्ठ संबंध

स्रोत

2017-04-15 01:05:11

उत्तर

संबंधित मुद्दे