Question

有人可以告诉我，我的代码中出现了什么错误，当我在离子2应用中加载谷歌地图时，标记不会出现在第一次。当我加载地图第二次或之后时会加载。

Google地图将如何显示用户位置和标记位置之间的路径。

export class Map implements OnInit {

map:GoogleMap;
  constructor(public navCtrl: NavController, public navParams: NavParams,private googleMaps: GoogleMaps) {}

 ngOnInit() {
 this.loadMap()}

loadMap() {

 let location : LatLng = new LatLng(xxxxx,yyyyyy); 
 const markerOptions: MarkerOptions = {
   position: location, 
   title: 'Dubai'
 };





this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': true
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          },
          'camera': {
            'latLng': location,
            'tilt': 30,
            'zoom': 15,
            'bearing': 50
                    },
        });
this.map.addMarker(markerOptions).then(data => {data.showInfoWindow();});
this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log('Map is ready!'));

}
}

Answer 1

在此检查我的解决方案https://github.com/driftyco/ionic-native/issues/1444

我使用了来自https://ionicframework.com/docs/native/google-maps/

的原生谷歌地图

这是我使用的代码

import { Component,  AfterViewInit } from '@angular/core';
import { NavController } from 'ionic-angular';

import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';

import { GoogleMapsLatLng } from 'ionic-native';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements AfterViewInit  {

    map: GoogleMap;

    constructor(public navCtrl: NavController) 
    {

    }

    // Load map only after view is initialized
    ngAfterViewInit() {
        this.loadMap();
    }

    loadMap() 
    {
         // make sure to create following structure in your view.html file
         // and add a height (for example 100%) to it, else the map won't be visible
         // <ion-content>
         //  <div #map id="map" style="height:100%;"></div>
         // </ion-content>
        let location = new GoogleMapsLatLng(-34.9290,138.6010);

        this.map = new GoogleMap('map', {
          'backgroundColor': 'white',
          'controls': {
            'compass': true,
            'myLocationButton': true,
            'indoorPicker': true,
            'zoom': false
          },
          'gestures': {
            'scroll': true,
            'tilt': true,
            'rotate': true,
            'zoom': true
          },
          'camera': {
            'latLng': location,
            'tilt': 0,
            'zoom': 15,
            'bearing': 50
          }
        });

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() =>
        {
            console.log('Map is ready!');
            this.map.addMarker({
                'position': location,
                'visible': true,
                'title': "nesto",
                'markerClick': function(marker) {
                    marker.showInfoWindow();
                }
            });

        });
     }

}

AddMarker未在Ionic 2中首次加载

1 个答案: