Question

我可以在GoogleMap设备上获得Android，问题是它没有指向我的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

下面是我的Android地图在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 !!

请帮助我，因为我是离子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;。因此，您可以在不使用渲染贴图的情况下重复使用地图。因为每个加载页面的Google地图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＆amp; lng和title在地图对象上添加标记。看看：

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

快乐的编码!!

Answer 4

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

@覆盖

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

}

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

4 个答案: