Как исправить центральный маркер и получить новый LatLng - PullRequest
Новая
       31

Как исправить центральный маркер и получить новый LatLng

0 голосов
/ 08 октября 2018

Я новичок здесь и использую ионный каркас v3.У меня есть проблема, которую я не могу решить.Я пытаюсь создать маркер для фиксированного размещения на экране.Как приложение Uber.Я использую Google Maps родной.Я благодарю вас, если вы найдете решение.

Вот мой код.

Lokasi.ts 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform,LoadingController,AlertController } from 'ionic-angular';
import { GoogleMaps, GoogleMap,GoogleMapsEvent,Marker,MarkerOptions,GoogleMapOptions } from'@ionic-native/google-maps';
import { Geolocation } from'@ionic-native/geolocation';


@IonicPage()
@Component({
selector: 'page-lokasi',
templateUrl: 'lokasi.html',
})
export class LokasiPage {
map:GoogleMap;
loading:any;
lat=0;
lng=0;


constructor(public navCtrl: NavController, public navParams: NavParams, 
public platfrom:Platform, public geolocation: Geolocation,public loader:LoadingController, private alert:AlertController) {


  this.platfrom.ready().then(()=>{ 
    this.loadMap();
  })
}


  ionViewDidLoad() {
this.showLoading();



console.log('ionViewDidLoad LokasiPage');
}


showLoading(){
this.loading= this.loader.create({
  content:'Menunggu map'
});
this.loading.present();
}


 dismissLoading(){
this.loading.dismiss();
this.loading= null;
}


addMarker(){
this.map.addMarker({
title:'Lokasi Saya',
icon:'red',
position:{
lat:this.lat,
lng:this.lng
}
}).then((marker:Marker)=>{
marker.showInfoWindow();
});
}


loadMap(){
this.geolocation.getCurrentPosition({enableHighAccuracy:true,timeout:20000, maximumAge:0}).then((resp)=>{
this.lat=resp.coords.latitude
this.lng=resp.coords.longitude
this.dismissLoading();


let mapOptions: GoogleMapOptions = {
controls:{
'compass':true,
'myLocationButton':true,
'myLocation':true,
},
camera: {
target: {
lat: this.lat,
lng: this.lng
},
zoom: 18,
tilt: 30
 }
};


this.map=GoogleMaps.create('map',mapOptions);
this.addMarker();
}).catch((error)=>{
console.log('error',error);
});


this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
console.log('map ready')
})


onButton_click() {
// Show the current camera target position.
var target = this.map.getCameraTarget();
let alert = this.alert.create({
title: 'Current camera target',
subTitle: [
 "lat: " + target.lat,
"lng: " + target.lng
].join("<br />"),
buttons: ['Dismiss']
});
alert.present();
}
}

и это мой lokasi.html.Пожалуйста, помогите мне. 

<div id="map">
<span class="smallPanel"><button ion-button (click)="onButton_click($event)">Click here</button></span>
</div>
...