Angular-google-maps: दिशा सेवा

मेरे लिए एक ही सवाल ..

क्या हम angular2-google-maps के साथ दिशा-निर्देश सेवा का उपयोग कर सकते हैं?

-> दिशा सेवा
-> उदाहरण

आपके काम के लिए बहुत-बहुत धन्यवाद
-- क्रिस

मैं भी जानना चाहता हूं कि क्या यह ऐसी चीज है जिसे मैं एक्सेस कर सकता हूं। मैं एक अपेक्षाकृत भारी मानचित्र परियोजना पर काम कर रहा हूं जिसके लिए दो स्थानों के बीच Google के सुझाए गए दिशा-निर्देशों को दिखाने के लिए मानचित्रों में से एक की आवश्यकता है। कृपया मुझे बताएं कि क्या मैंने प्रलेखन को देखा है और अभी नहीं मिला है। किसी भी तरह से, यह परियोजना शानदार है! आपके काम के लिए धन्यवाद @SebastianM

यह निर्देश आपकी आवश्यकताओं को हल कर सकता है

import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core/services/google-maps-api-wrapper';
import { Directive,  Input} from '@angular/core';
declare var google: any;



@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: [],
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

हे डेविड, निर्देश के लिए धन्यवाद, लेकिन मुझे अपने कोड में इसे शामिल करने में कठिनाई हो रही है। क्या मुझे इसे सीधे गूगल मैप डोम में डालना चाहिए। उदाहरण के लिए:
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

मुझे इसे काम करने में कठिन समय हो रहा है, मैं वास्तव में कोणीय 2 के लिए नया हूं ... आपकी मदद के लिए धन्यवाद

हाय @हार्डवर्कर , यह सही तरीका है:

<sebm-google-map>
  <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
</sebm-google-map>

आपके घटक नियंत्रक वर्ग में आपको इस गुण को परिभाषित करना होगा।

origin = { longitude: 4.333, lattitude: -1.2222 };  // its a example aleatory position
destination = { longitude: 22.311, lattitude: -0.123 };  // its a example aleatory position

धन्यवाद! यह काम कर रहा है। लेकिन मुझे आश्चर्य है कि गतिशील रूप से वेपॉइंट जोड़ना संभव है, फिर पृष्ठ को रीफ्रेश किए बिना दिशा अपडेट करें?

असल में मुझे यही मिला है:
मैंने अपने घटक में जोड़ा:

@ViewChild(DirectionsMapDirective) vc:DirectionsMapDirective;
और फिर जब भी कोई नया तरीका जोड़ा जाता है तो मैं घटक से vc.updateDirections() को बस कॉल करता हूं। जो निर्देश में कोड को वापस बुलाएगा। क्या इसे करने का सही तरीका है?

निश्चित रूप से @ahardworker , वेपॉइंट पदों की सरणी है, आप निर्देश पर तर्क जोड़ सकते हैं या इनपुट पैरामीटर का उपयोग करके इस सरणी को इंजेक्ट कर सकते हैं।

उदाहरण के लिए...

<sebm-google-map>
  <sebm-google-map-directions [origin]="origin" [destination]="destination" [waypoints]="waypoints"></sebm-google-map-directions>
</sebm-google-map>

निर्देश:

@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  @Input() waypoits;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: waypoints,
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

नमस्ते @davidpestana
मैंने निर्देश-निर्देश शामिल करने का प्रयास किया लेकिन मुझे यह त्रुटि मिल रही है:
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(मुझे नहीं पता, स्वरूपण इतना खराब क्यों है, लेकिन मुझे आशा है कि आप इसे वैसे भी पढ़ लेंगे)

एचटीएमएल
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <sebm-google-map-marker [latitude]="latHome" [longitude]="lngHome" [title]="'titleHome'"</sebm-google-map-marker> <sebm-google-map-marker [latitude]="latComp" [longitude]="lngComp" [title]="titleComp"</sebm-google-map-marker> <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions> </sebm-google-map>

अवयव
`@घटक({
चयनकर्ता: 'गूगल-मैप्स',
शैलियाँ: [आवश्यकता ('./googleMaps.scss')],
टेम्प्लेट: आवश्यकता ('./googleMaps.html'),
})
एक्सपोर्ट क्लास गूगलमैप्स {
लैटहोम: संख्या = ४८.१५१८३९;
lngहोम: संख्या = १३.८३१७२६;
latComp: संख्या = ४८.३२९५००;
lngComp: संख्या = १४.३१९७६५;
शीर्षक कॉम्प: स्ट्रिंग = "डायनेट्रेस";
ज़ूम: संख्या = 10;

lat: संख्या = (this.latComp + this.latHome) / 2;
एलएनजी: संख्या = (this.lngComp + this.lngHome) / 2;

मूल = {देशांतर: 4.333, अक्षांश: -1.2222};
गंतव्य = {देशांतर: २२.३११, अक्षांश: -०.१२३};
}`

क्या मुझे कहीं निर्देश दर्ज करना होगा?

@ProkerBen हां, आपको उस निर्देश को उस मॉड्यूल में पंजीकृत करने की आवश्यकता है जिसे आप घोषणा के रूप में उपयोग कर रहे हैं, ठीक वैसे ही जैसे आपके द्वारा उपयोग किए जाने वाले किसी भी अन्य निर्देश के लिए।

हाँ @ProkerBen , कैसे @lazarljubenovic ने कहा, आपको अपने मॉड्यूल में निर्देश पंजीकृत करने की आवश्यकता है

import { CustomMapDirective } from '[your route to directive folder]/google-map.directive';
...
@NgModule({
  imports: [...],
  exports: [..],
  declarations:[...,CustomMapDirective]
})

@davidpestana DirectionsMapDirective मार्ग प्रदर्शित करता है लेकिन यह ज़ूम-इन नहीं करता है, हालांकि मैंने ज़ूम = 17 सेट किया था

यह एक Google एपीआई संपत्ति है, जब दिशा-निर्देश डिस्प्ले सेवा का उपयोग करते हैं, तो सभी तरह के बिंदुओं को देखने के लिए मानचित्र स्वचालित रूप से ज़ूम करता है। यदि आप ज़ूम मान सेट करते हैं, तो इसे अनदेखा कर दिया जाएगा।

@davidpestana हां! मैंने GMapSDK के शुद्ध func की कोशिश की और यह अच्छी तरह से काम करता है।

}, function(response, status) {
  if (status === 'OK') {
    directionsDisplay.setOptions({ preserveViewport: true });
    directionsDisplay.setDirections(response);
  } else {
    window.alert('Directions request failed due to ' + status);
  }

DirectionsDisplay.setOptions({PreserveViewport: true}) मानचित्र को बलपूर्वक ज़ूम मान रखता है

@davidpestana हाय,

मुझे एपीआई के साथ समस्या है। मैं इस धागे में दिखाए गए निर्देश का उपयोग करता हूं और यह बहुत अच्छा काम करता है!
मेरे पास एकमात्र समस्या यह है कि जब मुझे उसी मानचित्र पर एक नया मार्ग दिखाने की आवश्यकता होती है। मैं उसी फ़ंक्शन को फिर से मूल घटक से कॉल करता हूं और यह पुराने मार्ग पर नया मार्ग प्रिंट करता है। मेरे पास यह कोड है:
`
निर्यात वर्ग
@Input() डे स्टेशन: स्ट्रिंग;
@ इनपुट () मूल: स्ट्रिंग;

constructor (private gmapsApi: GoogleMapsAPIWrapper) {

}

ngOnInit(){
    this.setMap();
}

setMap():void{
    this.gmapsApi.getNativeMap().then(map => {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
        directionsDisplay.setMap(map);
        directionsService.route({
            origin: this.origin,
            destination: this.destination,
            waypoints: [],
            optimizeWaypoints: true,
            travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });

    });
}

}
`
जब मुझे नया मार्ग दिखाने की आवश्यकता होती है तो मूल घटक सेटमैप फ़ंक्शन को कॉल करता है और मूल और गंतव्य चर बदल जाते हैं।
क्या मूल घटक से मानचित्र को पुनः लोड करने का कोई तरीका है?

@davidpestana मैं भी ओकेनोक द्वारा वर्णित समस्या का
@okanok क्या आपने कभी यह पता लगाया है

हाय @davidpestana और @ahardworker , मैंने निर्देश और HTML डेविड निर्दिष्ट का उपयोग करने की कोशिश की, लेकिन मुझे यह त्रुटि मिल रही है "अवैध वैल्यू त्रुटि: संपत्ति मूल में: एक स्ट्रिंग नहीं; और लैटलिंग या लैटलिंगलिटरल नहीं: संपत्ति में लैट: संख्या नहीं; और अज्ञात संपत्ति lat"।

घटक.ts
मूल = {देशांतर: 4.333, अक्षांश: -1.2222}; // इसका एक उदाहरण पाँसे की स्थिति
गंतव्य = {देशांतर: २२.३११, अक्षांश: -०.१२३}; // इसका एक उदाहरण पाँसे की स्थिति

Component.html

<sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>

त्रुटि: InvalidValueError: संपत्ति मूल में: एक स्ट्रिंग नहीं; और LatLng या LatLngLiteral नहीं: संपत्ति में lat: संख्या नहीं; और अज्ञात संपत्ति lat

क्या आपके पास कृपया कोई विचार है?

धन्यवाद

@developernm आपने अक्षांश गलत लिखा है;)

@ bene-starzengruber थोड़ी जल्दी में था lol

मैं इस विषय का बड़े चाव से अनुसरण कर रहा हूं। और मैं इस परियोजना (कोर) में एकीकृत होने की आशा करता हूं।

मुझे यह भी पता है कि मुझे मार्ग नियोजन और दिशा-निर्देश एपीआई की आवश्यकता है।

@davidpestana @ahardworker ने दिशा-निर्देशों के साथ मानचित्र को लागू किया है। लेकिन मुझे कई दिशाएं मिल रही हैं। मेरा नक्शा मार्ग संलग्न किया है। क्या आप कृपया सुझाव दे सकते हैं कि हर बार एकल मार्ग कैसे प्राप्त करें?

हर बार डेस्टिनेशन वैल्यू में बदलाव होने पर मैं My DirectionsMapDirective Directive को कॉल करूंगा।

अग्रिम में धन्यवाद।

@okanok @ marimuthum17 ,
घंटों की कोशिश के बाद मुझे लगता है कि मुझे इस समस्या का समाधान मिल गया है... यहां आप पढ़ सकते हैं कि दिशा-निर्देशों को परिभाषित करना आवश्यक है वैश्विक स्तर पर प्रदर्शित करें। डायरेक्शन के अंदर डायरेक्शनडिस्प्ले को परिभाषित करके, हर बार डायरेक्शनरेंडरर का एक नया इंस्टेंस बनाएगा और इसलिए यह पिछले रूट को नहीं हटा सकता है।

तो मैं अपने घटक में दिशा-निर्देशक बना देता हूं।
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

और फिर इसे अपने निर्देश में @Input() directionsDisplay; साथ इंजेक्ट करें।

मुझे लगता है कि यह ठीक नहीं है .. लेकिन यह काम करता है ..

@zuschy आपने बहुत अच्छा काम किया है। यह एक सम्मोहन की तरह काम करता है!!। मदद के लिये शुक्रिया।

मैंने जो किया वह परिवर्तन है: @Input() दिशा-निर्देश प्रदर्शन: कोई भी; // इनपुट के लिए टाइप जोड़ा है।

आपने मेरा दिन बचा लिया।

क्या कोई इतना दयालु हो सकता है कि इसे परियोजना में शामिल करने के लिए एक उदाहरण के रूप में लिख सके?

@zuschy , @marimuthum17
मैंने इस तरह के इनपुट के माध्यम से निर्देश को निर्देश भेजने की कोशिश की लेकिन निर्देश में निर्देश हमेशा अपरिभाषित होता है

<sebm-google-map-directions *ngIf="marker_count > 1" [directionsDisplay]="directionsDisplay" [waypointCnt]="waypointCnt" [origin]="origin" [destination]="destination" [waypoints]="waypoints"></sebm-google-map-directions>

घटक में मैं यह करता हूँ

 ngOnInit() {
        this.searchControl = new FormControl();
        this.setCurrentPosition();
        if(this.directionsDisplay === undefined){
            this.gmapsApi.getNativeMap().then(map => {               
                this.directionsDisplay = new google.maps.DirectionsRenderer({
                    draggable: true,
                    map: map,
                });
            });
        }

और निर्देश में

@Input() directionsDisplay;

ngOnChanges(changes: SimpleChanges) {
        console.log('onChange fired');
        console.log('changing', changes);
        this.gmapsApi.getNativeMap().then(map => {
            var directionsService = new google.maps.DirectionsService;
            this.directionsDisplay.addListener('directions_changed', function() {
                computeTotalDistance(this.directionsDisplay.getDirections());
            });

            this.directionsDisplay.setMap(map);
            directionsService.route({
                origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                waypoints: this.waypoints,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, function(response, status) {
                if (status === 'OK') {
                    //directionsDisplay.setDirections({routes: []});
                    this.directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

@zuschy @marimuthum17 @Giusti
मुझे भी इसी समस्या का सामना करना पड़ रहा है। दिशा निर्देश में अपरिभाषित हो रहा है।

@manohar-nyros @Giusti
यहां मैंने नियंत्रक में मेरा निर्देश कैसे घोषित किया है
@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
........ और बीओ की तरह पहुँचा।
if(this.vc.directionsDisplay === अपरिभाषित){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer;
});

@bonzysalesman @Giusti @manohar-nyros

मैंने अपनी एक परियोजना के लिए कोणीय 2 में Google मानचित्र दिशा-निर्देश सेवा बनाई है।
यहाँ इस बारे में एक लेख लिखा है, आप पूर्ण स्रोत कोड पा सकते हैं
यहां संलग्न डेमो है, यदि आप चाहें तो स्क्रिप्ट भी डाउनलोड कर सकते हैं। उम्मीद है कि यह किसी और की भी मदद करेगा।

@ मारीमुथुम17
इसे देखने के लिए बहुत-बहुत धन्यवाद, एक और समस्या यह है कि मैं एनजी में स्वत: पूर्ण फ़ील्ड कैसे जोड़ूं-आपके उदाहरण में कहें कि आपके पास एक + बटन होगा और दूसरा सर्चफील्ड दिखाई देगा। चूंकि सर्चफील्ड को #pickupInput / #pickupoutput से बंधा होना चाहिए और एक @Viewchild होना चाहिए ?

@ मारीमुथुम17
सहायता का शुक्रिया। यह मेरे लिए ठीक काम करता है। पुनः बहुत बहुत धन्यवाद।

@marimuthum17 , @zuschy
अरे निर्देश अब तक बहुत अच्छा काम कर रहा है लेकिन मुझे एक और समस्या का सामना करना पड़ा:

जब उपयोगकर्ता जेनरेट किए गए रूट से मार्कर को ड्रैग करता है और फिर रूट में मार्कर जोड़ता है तो ड्रैग किया गया मार्कर वापस अपने शुरुआती बिंदु पर कूद जाता है (क्योंकि मैं this.vc.updateDirections()) कॉल करता हूं क्योंकि मुझे लगता है कि घटक में मूल अपडेट नहीं होता है जब मैंने निर्देश में "directions_changed" को सुना।

मैंने निर्देश में @Output बनाने की कोशिश की लेकिन ऐसा लगता है कि मैं मूल का उपयोग @Input और @Output
मैंने श्रोता को उस घटक में ngOnInit में रखने की भी कोशिश की जहां directionsDisplay बनाया गया है लेकिन किसी तरह यह .addListener में अपरिभाषित हो जाता है

और मुझे यकीन नहीं है कि कौन सा मार्कर घसीटा गया है, इसलिए मेरा विचार था कि दिशा-निर्देशों में एक स्विच केस बनाया जाए और यह जांचें कि requestOrigin मूल/गंतव्य से मेल खा रहा है या वेप्वाइंट में से 1

ये रहा मेरा कोड

आदेश

export class DirectionsMapDirective {
    // get variables from map.component
    @Input() origin;
    @Input() destination;
    @Input() waypoints;
    @Input() waypointCnt;
    @Input() directionsDisplay;

    constructor (private gmapsApi: GoogleMapsAPIWrapper) {}

    // updateDirections has 2 optional parameters. gets called in map.component
    updateDirections(directionsDisplay, o?, d?){
        this.gmapsApi.getNativeMap().then(map => {
            var directionsService = new google.maps.DirectionsService;
            directionsDisplay.addListener('directions_changed', function() {
                //this.vc.computeTotalDistance(this.directionsDisplay.getDirections());

                if(directionsDisplay && directionsDisplay.dragResult){
                    let requestOrigin = directionsDisplay.dragResult.request.origin;
                    let requestDestination = directionsDisplay.dragResult.request.destination;
                    console.log(this.origin)
                    if(this.origin && (requestOrigin.lat.toString() == this.origin.latitude && requestOrigin.lng.toString() == this.origin.longitude)){
                        console.log('if?');
                        let temp_lat = requestDestination.lat.toString();
                        let temp_lng = requestDestination.lng.toString();
                        this.origin.latitude = temp_lat;
                        this.origin.longitude = temp_lng;
                        this.vc.updateDirections(directionsDisplay);
                    }
                }
                console.log(directionsDisplay);
            });


            //if origin / destination are undefined use value from optional parameters.
            directionsDisplay.setMap(map);
            if(!this.destination && d) {
                this.destination = d;
            }
            if(!this.origin && o) {
                this.origin = o;
            }

            // give the route the data, travel mode is driving bc users should plan a camping/ roadtrip.
            directionsService.route({
                origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                waypoints: this.waypoints,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, function(response, status) {
                console.log(status);
                if(status == 'OK'){
                    console.log('new route created')
                    var legs = response.routes[0].legs;
                    for (var i = 0; i < legs.length; i++) {
                        let inputFieldStart = document.getElementById('start') as HTMLInputElement;
                        let inputFieldDestination = document.getElementById('destination') as HTMLInputElement;
                        if(inputFieldStart.value == ''){
                            inputFieldStart.value = legs[i].start_address;
                        }
                        if(inputFieldDestination.value == ''){
                            inputFieldDestination.value = legs[i].end_address;
                        }
                    }
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                }else{
                    console.log('keine Route möglich!')
                }
            });

            //function for displaying the travel distance
            function computeTotalDistance(result) {
                var total = 0;
                var myroute = result.routes[0];
                for (var i = 0; i < myroute.legs.length; i++) {
                    total += myroute.legs[i].distance.value;
                }
                total = total / 1000;
                document.getElementById('trip_length').innerHTML = 'The trip is <span id="trip_length_nr">' +total + '</span>km long.';
            }
        });
    }
}

अवयव:

यहाँ मैं मूल रूप से this.vc.updateDirections(this.directionsDisplay); को Mapclicked / Autocomplete पर कॉल करता हूँ

जब मैंने यहां श्रोता को इस तरह आजमाया: (पहला अगर एडलिस्टर दिशा-निर्देशों के बाद प्रदर्शित = अपरिभाषित)

ngOnInit() {


        this.searchControl = new FormControl();

        this.setCurrentPosition();

        this.mapsAPILoader.load().then(() => {
            this.geocoder = new google.maps.Geocoder;
            this.directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
            this.directionsDisplay.addListener('directions_changed', function() {
                //directionsDisplay = undefined?????
                if(this.directionsDisplay && this.directionsDisplay.dragResult){
                    let requestOrigin = this.directionsDisplay.dragResult.request.origin;
                    let requestDestination = this.directionsDisplay.dragResult.request.destination;
                    console.log(this.origin)
                    if(this.origin && (requestOrigin.lat.toString() == this.origin.latitude && requestOrigin.lng.toString() == this.origin.longitude)){
                        console.log('if?');
                        let temp_lat = requestDestination.lat.toString();
                        let temp_lng = requestDestination.lng.toString();
                        this.origin.latitude = temp_lat;
                        this.origin.longitude = temp_lng;
                        this.vc.updateDirections(this.directionsDisplay);
                    }
                }
                console.log(this.directionsDisplay);
            });
            let autocomplete = new google.maps.places.Autocomplete(this.OriginSearchElementRef.nativeElement, {
                types: ["address"]
            });
            let autocomplete2 = new google.maps.places.Autocomplete(this.DestinationSearchElementRef.nativeElement, {
                types: ["address"]
            });
            let autocomplete3 = new google.maps.places.Autocomplete(this.WaypointSearchElementRef.nativeElement, {
                types: ["address"]
            });

            autocomplete.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete, 'origin');
            });
            autocomplete2.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete2, 'destination');
                this.vc.updateDirections(this.directionsDisplay);
            });
            autocomplete3.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete3, 'waypoint');
                this.vc.updateDirections(this.directionsDisplay);
            });

        });

    }

प्रश्न:

वर्तमान में डेटाबेस में सूची की सदस्यता ले रहा है। मैं डेटाबेस से जोड़े या हटाए जाने पर मार्कर बनाने और निकालने के लिए ngFor का उपयोग कर रहा हूं। क्या कोई ऐसा तरीका है जिससे मैं दिशाओं को विशेष मार्करों के साथ जोड़ सकता हूं और फिर जब मार्कर को मानचित्र से हटा दिया जाता है तो दिशाओं को हटा सकता हूं?

मूल रूप से, उपयोगकर्ता का कहना है कि वे ऐप में उपलब्ध हैं। मार्कर स्थान के निर्देशों के साथ मानचित्र पर दिखाई देता है। जब वे कहते हैं कि वे उपलब्ध नहीं हैं। मैं चाहता हूं कि इससे जुड़े मार्कर और निर्देश मानचित्र से हटा दिए जाएं।

मैं वॉचपोजिशन के साथ यूजर की लोकेशन भी देखता हूं। स्पष्ट रूप से मार्कर स्थिति अद्यतन के साथ-साथ दिशा-निर्देश भी चाहते हैं।

@davidpestana इस तरह के शानदार काम के लिए धन्यवाद ... मैंने बुनियादी निर्देश लागू किया लेकिन यह मुझे त्रुटि दे रहा है "ZERO_RESULTS के कारण दिशा अनुरोध विफल" कृपया इस त्रुटि के साथ मेरी मदद कर सकते हैं?

मुझे भी इस समस्या का सामना करना पड़ रहा है कृपया इसे जांचें:

https://github.com/SebastianM/angular-google-maps/issues/985

कोड के साथ कुछ भी गलत नहीं है।
कृपया जांचें, आपने एपीआई को कॉल करते समय अपनी Google मानचित्र कुंजी जोड़ दी है। या गूगल डॉक्स के अनुसार हर दिन के लिए निर्धारित सीमा अनुरोध है।

@ marimuthum17 आप सही हैं आपके कोड में कुछ भी गलत नहीं था ... असल में मुझे जगह का हिस्सा याद आया ... मैं जगह आईडी सही ढंग से प्रदान नहीं कर रहा था, वह मुद्दा था ...

@MartiniHenry1988 आपको समस्या हो रही है क्योंकि आप Google की दिशा सेवा का उपयोग नहीं कर रहे हैं .... कृपया पूर्ण उदाहरण के लिए @ marimuthum17 की पिछली टिप्पणी देखें।

क्या कोई परिवर्तन हुआ ?, मुझे लाइन directionsDisplay.setMap(map); पर नीचे त्रुटि मिल रही है

Argument of type 'GoogleMap' is not assignable to parameter of type 'Map'

@kildareflare @amitdahan मैं देख रहा हूं कि आप लोगों को भी इसी मुद्दे का सामना करना पड़ा होगा, क्या आपको कभी कोई समाधान मिला?

मैं भी इस मुद्दे का सामना कर रहा हूं। @chaoranxie क्या आपको समाधान मिला है?

क्षमा करें, मुझे पता है कि विषय पहले से ही थोड़ा पुराना है लेकिन मुझे समस्या हो रही है और यह त्रुटि है:
'मूल' से बंधे नहीं जा सकते क्योंकि यह 'sebm-google-map-directions' की ज्ञात संपत्ति नहीं है।
लेकिन ऊपर एक समाधान दिया और मुझे यह स्पष्ट नहीं है कि यह कैसे करें, क्या कोई मुझे एक उदाहरण दे सकता है?

मेरी खराब इंग्लिश के लिए माफ़ कीजिये

@ फैबियन-ठग आप कोणीय के किस संस्करण का उपयोग कर रहे हैं? मैं 4* पर हूं और निर्देश अलग तरह से काम करते हैं।
निर्देश में चयनकर्ता से सिंटैक्स बदलें: 'sebm-google-map-directions' से चयनकर्ता ['sebm-google-map-directions'] फिर HTML में इसे एक तत्व के बजाय एक तत्व में जोड़ें (उदाहरण

@davidpestana @marimuthum17 मैंने उपरोक्त एक किया है। अब यह उपयोगकर्ता के वर्तमान स्थान और चयनित गंतव्य के बीच की दिशा दिखाता है।
लेकिन मुझे मार्कर आइकन बदलने की जरूरत है! उसको कैसे करे?
दिशा परिणाम में कस्टम मार्कर कैसे शामिल करें?

@davidpestana
आप यह समाधान आयात { CustomMapDirective } को '[आपका मार्ग निर्देश फ़ोल्डर]/google-map.directive' से देते हैं; लेकिन इसके लिए क्या मुझे कुछ पैकेज स्थापित करने की आवश्यकता है ??

एक त्रुटि लेखन त्रुटि प्राप्त करना: अपरिभाषित की संपत्ति 'मूल' सेट नहीं कर सकता।

@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
सार्वजनिक मूल: कोई भी;
सार्वजनिक गंतव्य: कोई भी;
निर्माता (
निजी मोडल सेवा: NgbModal,

private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private gmapsApi: GoogleMapsAPIWrapper,
private _elementRef : ElementRef

) {}

पासिंग मान
this.vc.origin = {देशांतर: ७७.३३३, अक्षांश: १२.२२२२};
this.vc.destination = { देशांतर: ९०.३११, अक्षांश: २८.१२३};
this.vc.updateDirections ();

अग्रिम में धन्यवाद।

मेरे मानचित्र में दो बिंदु हैं, मैं उनके बीच दिशा कैसे प्राप्त कर सकता हूं?

घटक.ts

'@angular/core' से {घटक} आयात करें;
'@agm/core' से {MouseEvent} आयात करें;

@अवयव({
चयनकर्ता: 'ऐप-रूट',
templateUrl: './app.component.html',
स्टाइल यूआरएल: [ './app.component.css' ]
})
निर्यात वर्ग ऐपकंपोनेंट {
ज़ूम: संख्या = 8;

अक्षांश: संख्या = ५१.६७३८५८;
एलएनजी: संख्या = 7.815982;

मार्कर: मार्कर [] = [
{
अक्षांश: 51.673858,
एलएनजी: 7.815982,
लेबल: 'ए',
खींचने योग्य: सच
},
{
अक्षांश: 51.373858,
एलएनजी: 7.215982,
लेबल: 'बी',
खींचने योग्य: झूठा
}
]

}

इंटरफ़ेस मार्कर {
अक्षांश: संख्या;
एलएनजी: संख्या;
लेबल ?: स्ट्रिंग;
खींचने योग्य: बूलियन;
}

@davidpestana जब मैं आपके कोड का उपयोग करने की कोशिश कर रहा
"'मूल' से बंधे नहीं जा सकते क्योंकि यह 'sebm-google-map-directions' की ज्ञात संपत्ति नहीं है"

1. यदि 'sebm-google-map-directions' एक कोणीय घटक है और इसमें 'मूल' इनपुट है, तो सत्यापित करें कि यह इस मॉड्यूल का हिस्सा है।
2. यदि 'sebm-google-map-directions' एक वेब घटक है तो इस संदेश को दबाने के लिए इस घटक के '@NgModule.schemas' में 'CUSTOM_ELEMENTS_SCHEMA' जोड़ें।
3. किसी भी संपत्ति को अनुमति देने के लिए इस घटक के '@NgModule.schemas' में 'NO_ERRORS_SCHEMA' जोड़ें। ("
   

@davidpestana ध्यान देने योग्य हो सकता है कि आपके वेपॉइंट को API, LatLng, या जैसे स्थानों से प्रतिक्रिया के रूप में परिभाषित किया जा सकता है:

let waypoints = [
    {location: {placeId: place_id}}
];

https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests

यह सब मेरे लिए काम किया, धन्यवाद! क्या यह एजीएम/कोर में जोड़ने लायक होगा यदि यह अन्य निर्देशों के समान प्रारूप में था?

क्या इस बारे में कोई अपडेट है?

क्या स्ट्रिंग के रूप में origin और destination उपयोग करना संभव है?

इसका कारण यह है कि आप अनुमान _समय और दूरी_ तक नहीं पहुंच सकते क्योंकि यह कोड नीचे ब्लॉक है। यह एक अनाम कॉलबैक फ़ंक्शन है, जहां इसकी पहुंच कक्षा के this.xyz चर को पढ़ने/लिखने तक नहीं है।
}, function(response: any, status: any) {

मैं नीचे बदलने के बाद उस फ़ंक्शन के अंदर जानकारी संग्रहीत करने और सेवाओं का उपयोग करने में सक्षम था। यह es6 तीर फ़ंक्शन का उपयोग करता है जो टाइपस्क्रिप्ट कक्षाओं के मूल निवासी हैं। अधिक जानकारी यहाँ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

नमस्ते,
क्या कोई मुझे दिखा सकता है कि दिशा-पथ के मार्ग में आउटपुट के रूप में क्लिक प्रारंभ स्थान जैसे ईवेंट कैसे बनाएं।

धन्यवाद

हाय @ डेविडपेस्टाना , @ मारीमुथुम 17 , @ ओकानोक

मुझे एक नई समस्या का सामना करना पड़ रहा है जैसे, जब मैं पहली बार मार्ग खींचता हूं, तो यह सही ढंग से प्रदर्शित होता है, अगर मैं दूसरा मार्ग खींचने की कोशिश कर रहा हूं, तो पहला रास्ता साफ नहीं हो रहा है और नए मार्ग के लिए लाइन प्रदर्शित नहीं हो रही है।

यहाँ मेरा कोड है,

घटक.टीएस,

showDirections( ) { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.org = { latitude: position.coords.latitude, longitude: position.coords.longitude}; this.dst = {longitude: this.cycle.longitude, latitude: this.cycle.latitude}; console.log('Src ' + this.org.latitude ); console.log('Dst' + this.dst.latitude ); }); } }

उपयोगकर्ता द्वारा एक बटन पर क्लिक करने के बाद इस फ़ंक्शन को कॉल किया जाता है। और घटक का एचटीएमएल,
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <appCycleDirection *ngIf="dst !== undefined" [org]="org" [dst]="dst"></appCycleDirection> <agm-marker [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>

निर्देश कोड इस प्रकार है,

````
'@angular/core' से {Directive, Input, OnInit} आयात करें;
'@agm/core' से {GoogleMapsAPIWrapper} आयात करें;

Google को घोषित करें: कोई भी;
@निर्देश ({
// tslint: अक्षम-अगली पंक्ति: निर्देश-चयनकर्ता
चयनकर्ता: 'ऐपसाइकल डायरेक्शन'
})
निर्यात वर्ग CycleDirective OnInit को लागू करता है {

@ इनपुट () संगठन;
@ इनपुट () डीएसटी;
@Input () मूल स्थान: कोई भी;
@Input () डेस्टिनेशन प्लेस आईडी: कोई भी;
@Input() वेपॉइंट्स: कोई भी;
@Input () दिशाएँ प्रदर्शित करें: कोई भी;
@ इनपुट () अनुमानित समय: कोई भी;
@ इनपुट () अनुमानित दूरी: कोई भी;
कंस्ट्रक्टर (निजी gmapsApi: GoogleMapsAPIWrapper) { }

एनजीऑनइनिट () {
कंसोल.लॉग ('निर्देश में');
कंसोल.लॉग (this.org);
this.gmapsApi.getNativeMap ()। तब (मानचित्र => {
कास्ट दिशा-निर्देश सेवा = नया google.maps.DirectionsService;
कास्ट दिशा-निर्देश डिस्प्ले = नया google.maps.DirectionsRenderer;
दिशा-निर्देश डिस्प्ले.सेटमैप (मानचित्र);
दिशा-निर्देश सेवा.मार्ग({
मूल: {lat: this.org.latitude, lng: this.org.longitude},
गंतव्य: {lat: this.dst.latitude, lng: this.dst.longitude},
मार्ग बिंदु: [],
ऑप्टिमाइज़ वेपॉइंट्स: सच,
यात्रा मोड: 'ट्रांजिट'
}, फ़ंक्शन (प्रतिक्रिया, स्थिति) {
अगर (स्थिति === 'ठीक है') {
दिशा-निर्देश डिस्प्ले.सेटदिशा-निर्देश (प्रतिक्रिया);
कंसोल.लॉग (प्रतिक्रिया);
} अन्यथा {
window.alert ('दिशा अनुरोध विफल' + स्थिति के कारण);
}
});

});

}

}

```

मेरे कोड में क्या गलत है, नया मार्ग प्रदर्शित होने पर मैं पहले मार्ग को गायब करना चाहता हूं।

नमस्ते, क्या हम सड़क पर एक क्लिक इवेंट डाल सकते हैं?
धन्यवाद

मैंने अपनी परियोजना में उसी निर्देश का उपयोग किया है और यह ठीक काम करता है, बस एक त्वरित प्रश्न, क्या वेज़, उबेर या लिफ़्ट ड्राइविंग मैप्स की तरह सड़क पर ट्रैफ़िक (लाइन पर लाल, पीले या नीले खंड) प्रदर्शित करना संभव है?
आपकी मदद अत्यधिक सराहनीय है

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

https://github.com/explooosion/Agm-Direction

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।