为什么我的标记没有指向我当前的位置

Question

我可以在我的Android 设备上获得GoogleMap，问题是它没有指向我的current location。

我已经安装了这两个包：

$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" 

$ npm install --save @ionic-native/google-maps

下面是我的 google 地图在我的 android 设备上的样子

下面是我的代码：

  ionViewDidLoad() {
    console.log('ionViewDidLoad GoogleMapTestPage');
    this.loadMap();
  }


ngAfterViewInit() {
 //this.loadMap();         
}

loadMap() {

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map: GoogleMap = this.googleMaps.create(element);

 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(
   () => {
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
   }
 );

 // create LatLng object
 let ionic: LatLng = new LatLng(43.0741904,-89.3809802);  

 // create CameraPosition 
 let position: any = {
   target: ionic,
   zoom: 18,
   tilt: 30
 };

 // move the map's camera to position
 map.moveCamera(position);

 // create new marker
 let markerOptions: MarkerOptions = {
   position: ionic,
   title: 'Ionic'
 };

 const marker:any = map.addMarker(markerOptions)
   .then((marker: Marker) => {
      marker.showInfoWindow();
    });
 }  

我的 html 代码

 <ion-content>    
      <div #map id="map" style="height:100%;"></div>  
</ion-content>

我的问题：

如何在上面的代码中指向我的current location！！

请帮助我，因为我是 ionic 3 的新手，我只是想指出当前用户

谷歌上的位置！！

Answer 1

您需要在地图上进行更改，例如添加标记一旦准备就绪。所以把标记设置代码移到map.one(GoogleMapsEvent.MAP_READY)。

 let ionic: LatLng = new LatLng(43.0741904,-89.3809802);  

 // create CameraPosition 
 let position: any = {
   target: ionic,
   zoom: 18,
   tilt: 30
 };

 map.one(GoogleMapsEvent.MAP_READY).then(
   () => {
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
      map.moveCamera(position);

     // create new marker
    let markerOptions: MarkerOptions = {
        position: ionic,
        title: 'Ionic'
    };

    const marker:any = map.addMarker(markerOptions)
        .then((marker: Marker) => {
            marker.showInfoWindow();
        });
    }  
   }
 );

Answer 2

试试这个并在类之后的构造函数之前声明变量map:GoogleMap;。因此，您可以越来越多地重复使用您的地图而无需渲染地图。因为每个加载页面您的谷歌地图 api 配额都在增加。

我的建议： 将加载地图放在提供者上

this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{
      console.log("Map ready");
      this.map.setMyLocationEnabled(true);
      this.map.getMyLocation({enableHighAccuracy:true}).then(pos=>{
        this.map.setCameraTarget(pos.latLng);
        this.map.animateCamera({
          target:pos.latLng
        });

        this.map.addMarker({
            title: 'You',
            icon: 'pin'
            animation: 'DROP',
            position: pos.latLng
        }).then((marker)=>{
          this.userMarker = marker;
            marker.setPosition(pos.latLng);

          });
        });
      });

Answer 3

要添加标记，您必须在地图对象上添加带有 lat&lng 和标题的标记。 看看：

map.addMarker(new MarkerOptions().position(new LatLng(22.7253, 75.8655)).title("Title"));

编码愉快！！

Answer 4

首先确保您的 API Key 有效并将其添加到您的清单中 `` 然后在 onMapReady(GoogleMap map) 方法中使用 add map.setMyLocationEnabled(true)。像这样

@Override

public void onMapReady(GoogleMap gMap) {
   mGoogleMap = gMap;
   mGoogleMap.setMyLocationEnabled(true);
   buildGoogleApiClient();
   mGoogleApiClient.connect();

}