कोणीय 2 और Google मानचित्र API। घटक

Question

से मानचित्र की वस्तु का उपयोग करें मैं कोणीय 2 का उपयोग करता हूं और मुझे Google मानचित्र के साथ काम करने की आवश्यकता है। मुझे नक्शा आरंभ करने की आवश्यकता है, मार्ग निर्देशांक के साथ कुछ सरणी बनाएं, Custom HTML Marker जोड़ें, कुछ ईवेंट श्रोता जोड़ें, पॉलीलाइन बनाएं, आदि। इनमें से सभी वेब पेज पर केवल मूल जेएस के साथ बना सकते हैं। मेरे काम में मुझे Angular2 का उपयोग करने की आवश्यकता है। मैं घटक के अंदर एक नक्शा ऑब्जेक्ट कैसे लगा सकता हूं और किसी ऑब्जेक्ट के साथ किसी घटक के अंदर इसका उपयोग कैसे कर सकता हूं?

angular2-google-maps लाइब्रेरी है, लेकिन इसकी सीमित कार्यक्षमता है। उदाहरण के लिए मैं angular2-google-नक्शे के साथ एक पॉलीलाइन नहीं बना सकते, मैं पुस्तकालयों में से कुछ, आदि एकीकृत नहीं कर सकते हैं, उदाहरण के कस्टम HTML मार्कर, cSnapToRoute के लिए

Answer 1

आप कर सकते हैं यह आसान जे एस स्क्रिप्ट कि आप कोणीय के बिना पेज पर लोड करेंगे। आप इस तरह GMaps init कर सकते हैं:

var mapData; 
    container.gmap(
    { 
     'zoomControl': true, 
     'zoomControlOptions': { 
      'style': google.maps.ZoomControlStyle.SMALL, 
      'position': google.maps.ControlPosition[ options.mapZoomPosition ] 
     }, 
     'panControl': false, 
     'streetViewControl': false, 
     'mapTypeControl': false, 
     'overviewMapControl': false, 
     'scrollwheel': false, 
     'draggable': options.draggable, 
     'mapTypeId': google.maps.MapTypeId[ options.mapType ], 
     'zoom': options.mapZoom, 
     'styles': styles[ options.mapStyle ] 
    }) 
    .bind('init', function() { 

     mapData = { 
      container: container, 
      map: map, 
      options: options, 
      addMarker: addMarker, 
      library: library, 
      iw: { 
       data: infoWindowData, 
       window: infoWindow, 
       content: infoWindowContent, 
       open: infoWindowOpen, 
       close: infoWindowClose 
      } 
     }; 
} 

और तुम तो घटना ट्रिगर जब GMaps प्रारंभ खत्म हो जाएगा कर सकते हैं:

google.maps.event.addListenerOnce(map, 'idle', function() { 

$(document).trigger('map.init', mapData); 

}); 

और फिर आप कोणीय में इसे पकड़ कर सकते हैं:

var mapData; 
$(document).on('map.init', function (event,data) { 
    mapData = data; 
}); 

और फिर आप इसे सामान्य रूप से उपयोग कर सकते हैं, उदाहरण के लिए ज़ूम सेट करना:

mapData.map.setZoom(50);