javascript - कोणीय के साथ Google मानचित्र




angularjs google-maps (2)

मैं एक ऐसा प्रोजेक्ट बनाना चाहता हूं जहां मुझे Google मानचित्र एपीआई को एकीकृत करने की आवश्यकता है मुझे स्वत: पूर्ण, स्थानीयकरण की आवश्यकता है और नक्शे पर एक मार्ग बनाने के लिए। मैं इसे कोणीय के साथ कैसे कर सकता हूं, क्या आप इसके लिए एक पुस्तकालय की सिफारिश कर सकते हैं? या मैं जावास्क्रिप्ट के लिए Google मानचित्र एपीआई के साथ यह कैसे कर सकता हूं? इस परियोजना का उपयोग जन-फ़ुलस्टैक का उपयोग करके किया जाता है।

धन्यवाद।


आप कोणीय Google नक्शे का उपयोग कर सकते हैं। कोनालर Google मैप्स, कॉफी स्क्रिप्ट और जावास्क्रिप्ट में लिखे निर्देशों का एक हिस्सा है (कोणीय- UI का भाग) जो एक ऐंगुलर जेएस एप्लीकेशन में Google मानचित्र को एकीकृत करता है। बेशक इस उद्देश्य के लिए कई अन्य निर्देश हैं।

https://angular-ui.github.io/angular-google-maps/


सबसे पहले, यदि आप Google Maps API को AngularJS के साथ जाना चाहते हैं, तो आपके पास दो समाधान हैं:

मैं आपको यह दिखाने के लिए जा रहा हूं कि कैसे इसे खरोंच से आसान बना दिया जाए

यह एक आसान अंगुलियोज़ अनुप्रयोग का उदाहरण है जो केवल ऐसे एपीआई का प्रयोग करने के उद्देश्य से है। मैंने इस छोटे अंगुलियोज व्यायाम को बड़े अनुप्रयोगों में उपयोग करने के लिए बनाया है।

index.html:

<html ng-app="myApp"> <!--Your App-->
  <head>
    <title>AngularJS-Google-Maps</title>
    <link rel="stylesheet" href="style.css">
    <script src="../lib/angular.min.js"></script>
    <script src="app.js"></script>

    <!-- You have to look for a Maps Key, you can find it on Google Map            
         Api's website if you pay a bit of attention-->
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=
       YourKey&sensor=false">
    </script>

  </head>
  <body>
    <!--Custom directive my-maps, we will get our map in here-->
    <my-maps id="map-canvas"></my-maps>

  </body>
</html>

app.js:

var myApp = angular.module("myApp",[]);

//Getting our Maps Element Directive
myApp.directive("myMaps", function(){
    return{
        restrict:'E', //Element Type
        template:'<div></div>', //Defining myApp div
        replace:true, //Allowing replacing
        link: function(scope, element, attributes){

            //Initializing Coordinates
            var myLatLng = new google.maps.LatLng(YourLat,YourLong); 
            var mapOptions = {
                center: myLatLng, //Center of our map based on LatLong Coordinates
                zoom: 5, //How much we want to initialize our zoom in the map
                //Map type, you can check them in APIs documentation
                mapTypeId: google.maps.MapTypeId.ROADMAP 
                };

            //Attaching our features & options to the map
            var map = new google.maps.Map(document.getElementById(attributes.id),
                          mapOptions);
            //Putting a marker on the center
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title:"My town"
            });
            marker.setMap(map); //Setting the marker up
        }   
    };
});

style.css:

//Just giving our container Height and Width + A Red border
#map-canvas{
        height: 400px;
        width:  700px;
        border: 2px solid red;
}

यह सिर्फ शुरू करने के लिए एक वास्तव में बुनियादी तरीका है, मैं भी एक नियंत्रक का उपयोग नहीं किया, भले ही आप वास्तव में AngularJS में उन्हें इस्तेमाल करना चाहिए

यह एक काम है जो मैं इस कोड के साथ डाल Plunk

आप कई अलग अलग तरीकों से Google मैप्स एपीआई के साथ खेल सकते हैं, बस दस्तावेज को देखें या यहां स्टैक ओवरफ्लो पर देखें।

अब, यदि आप 2 स्थानों, मार्कर, आदि के बीच मार्गों का प्रबंधन करना चाहते हैं, तो आपको यह देखना चाहिए:

और, अंत में, आप यह काम कर सकते हैं JSFiddle @ शेरंग पटवर्धन द्वारा पोलीलाइन (अपने लंबे चाहता मार्गों) का उपयोग करते हुए।

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

आपको कुछ मिलना चाहिए:

myApp.directive("myMap", function(){ . . . }); //Goes in a Separated File

var myApp = angular.module("myApp",['myMaps']); //Dependency Injection

मुझे आशा है कि मैं सहायक रहा हूँ






yeoman