如何固定中心标记并获取新的LatLng

时间:2018-10-08 14:51:18

标签: google-maps ionic-framework ionic3 ionic-native

我在这里使用离子框架v3的新手。我有一个我无法解决的问题。我正在尝试创建一个标记,将其固定放置在屏幕上。就像超级应用程序一样。我使用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>

0 个答案:

没有答案