找到代码没问题，只需要帮助将我的地理位置添加为原点，有人可以帮助我吗？我的代码基础
这是我的 component.ts 或我的来自 ionic2 的 contact.ts
import { Component, NgModule,NgZone,OnInit,ViewChild,ElementRef,Directive,Input } from '@angular/core';
import {FormControl, FormsModule, ReactiveFormsModule}from'@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import { Geolocation} from '@ionic-native/geolocation';
import { DirectionsMapDirective} from '../../mapD/DirectionsMap.directive';
import {AgmCoreModule,MapsAPILoader, GoogleMapsAPIWrapper} from '@agm/core';
import {} from '@types/googlemaps';
declare var google: any;
declare var jQuery: any;
@Component({
selector: 'page-contact',
templateUrl: 'contact.html',
providers:[GoogleMapsAPIWrapper]
})
export class ContactPage implements OnInit{
public latitude: number;
public longitude: number;
public destinationInput: FormControl;
public destinationOutput: FormControl;
public zoom: number;
public iconurl: string;
public mapCustomStyles : any;
public estimatedTime: any;
public estimatedDistance: any;
@ViewChild("pickupInput")
public pickupInputElementRef: ElementRef;
@ViewChild("pickupOutput")
public pickupOutputElementRef: ElementRef;
@ViewChild("scrollMe")
private scrollContainer: ElementRef;
@ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
public origin :any ; // its a example aleatory position
public destination : any; // its a example aleatory position
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private gmapsApi: GoogleMapsAPIWrapper,
private _elementRef : ElementRef
) {
}
ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;
//this.iconurl = '../image/map-icon.png';
this.iconurl = '../image/map-icon.png';
// this.mapCustomStyles = this.getMapCusotmStyles();
//create search FormControl
this.destinationInput = new FormControl();
this.destinationOutput = new FormControl();
console.log(this.destinationInput)
console.log(this.destinationOutput)
//set current position
this.setCurrentPosition();
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
let autocompleteInput = new google.maps.places.Autocomplete(this.pickupInputElementRef.nativeElement, {
types: ["address"]
});
let autocompleteOutput = new google.maps.places.Autocomplete(this.pickupOutputElementRef.nativeElement, {
types: ["address"]
});
this.setupPlaceChangedListener(autocompleteInput, 'ORG');
this.setupPlaceChangedListener(autocompleteOutput, 'DES');
});
}
private setupPlaceChangedListener(autocomplete: any, mode: any ) {
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined) {
return;
}
if (mode === 'ORG') {
this.vc.origin = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
this.vc.originPlaceId = place.place_id;
} else {
this.vc.destination = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() }; // its a example aleatory position
this.vc.destinationPlaceId = place.place_id;
}
if(this.vc.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer;
});
}
console.log(this.vc.originPlaceId);
//Update the directions
this.vc.updateDirections();
this.zoom = 12;
});
});
}
getDistanceAndDuration(){
this.estimatedTime = this.vc.estimatedTime;
this.estimatedDistance = this.vc.estimatedDistance;
}
scrollToBottom(): void {
jQuery('html, body').animate({ scrollTop: jQuery(document).height() }, 3000);
}
private setPickUpLocation( place:any ) {
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 40;
}
private setCurrentPosition() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 12;
});
}
}
private getMapCusotmStyles() {
// Write your Google Map Custom Style Code Here.
}
}
这是 ionic 2 中的指令
import { Directive, Input, Output } from '@angular/core';
import { GoogleMapsAPIWrapper} from'@agm/core';
declare var google: any;
@Directive({selector:'agm-map-directions'})
export class DirectionsMapDirective{
@Input() origin:any ;
@Input() destination:any;
@Input() originPlaceId:any;
@Input() destinationPlaceId:any;
@Input() waypoints:any;
@Input() directionsDisplay:any;
@Input() estimatedTime : any;
@Input() estimatedDistance : any;
constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
updateDirections(){
this.gmapsApi.getNativeMap().then(map => {
if(!this.originPlaceId || !this.destinationPlaceId
){
return;
}
console.log(this.originPlaceId);
var directionsService = new google.maps.DirectionsService;
var me = this;
var latLngA = new google.maps.LatLng({lat: this.origin.latitude, lng: this.origin.longitude });
var latLngB = new google.maps.LatLng({lat: this.destination.latitude, lng: this.destination.longitude });
this.directionsDisplay.setMap(map);
this.directionsDisplay.setOptions({
polylineOptions: {
strokeWeight: 8,
strokeOpacity: 0.7,
strokeColor: '#00468c'
}
});
this.directionsDisplay.setDirections({routes: []});
directionsService.route({
origin: {placeId : this.originPlaceId },
destination: {placeId : this.destinationPlaceId },
avoidHighways: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
//travelMode: 'DRIVING'
}, function(response: any, status: any) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
map.setZoom(30);
//console.log(me.getcomputeDistance (latLngA, latLngB));
var point = response.routes[ 0 ].legs[ 0 ];
me.estimatedTime = point.duration.text ;
me.estimatedDistance = point.distance.text;
console.log(me.estimatedTime);
console.log( 'Estimated travel time: ' + point.duration.text + ' (' + point.distance.text + ')' );
} else {
console.log('Directions request failed due to ' + status);
}
});
});
}
private getcomputeDistance(latLngA: any , latLngB: any )
{
return (google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB) / 1000).toFixed(2);
}
}
这是html
<ion-header>
<ion-navbar>
<ion-title>
mapa
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false"
[zoom]="zoom" [styles]="mapCustomStyles">
<agm-marker [latitude]="lat" [longitude]="lng" [iconUrl]="iconurl">
<agm-info-window>
<strong>InfoWindow content</strong>
</agm-info-window>
</agm-marker>
<agm-map-directions [origin]="origin" [destination]="destination"></agm-map-directions>
</agm-map>
<br>
<br>
<br>
<br>
<br>
<div class="form-group">
<input placeholder="Enter source location" autocorrect="off" autocapitalize="off" spellcheck="off"
type="text" class="form-control" #pickupInput [formControl]="destinationInput">
<input placeholder="Enter destination" autocorrect="off" autocapitalize="off" spellcheck="off"
type="text" class="form-control" #pickupOutput [formControl]="destinationOutput">
</div>
</ion-content>
我的代码来自http://www.17educations.com/angularjs-2/google-map-directions-display-angular-2/