在 ionic 2 中加载页面时如何自动加载地图标记？答案

【问题标题】：how to load map marker automatically when page loaded in ionic 2?在 ionic 2 中加载页面时如何自动加载地图标记？
【发布时间】：2017-02-28 17:46:29
【问题描述】：

在 Ionic2 中，我使用下面的代码在页面加载时加载标记，但它显示错误：

initializeMap() {

let minZoomLevel = 16;
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(this.map);
  });
Marker(){  
  let source = "origin";
   let image = 'assets/img/Untitled-1.png';   
   let marker = new google.maps.Marker({    
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter(),
    draggable: true
    , icon: image
  }); 
  this.lastLatLng(marker,source);
}

在这段代码中，我通过

调用 marker()

ionViewDidEnter(){
  this.Marker();
}

view-controller.js:471 MapPage ionViewDidEnter 错误：无法读取属性 'getCenter' 为 null

更新 1： @Rohit-kumar-vinay 请求后的屏幕截图：

【问题讨论】：

标签： google-maps angular google-maps-api-3 ionic2

【解决方案1】：

您可以从@angular/core 使用OnInit

导入OnInint

import { Component, OnInit } from '@angular/core';
import { Geolocation } from 'ionic-native';

在导出类中实现

export class WelcomePage implements OnInit {
  map:any
}

实现功能

ngOnInit() {
  this.map = this.initMap();
}

initMap(): Promise<void> {
let promise: Promise<void> = new Promise<void>((resolve, reject) => {
Geolocation.getCurrentPosition().then((position) => {

let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let GooleMap = new google.maps.Map(document.getElementById('map'), {
  center: latLng,
  zoom: 18
});
let marker = new google.maps.Marker({
  position: latLng,
  map: GooleMap,
  title: 'My Location',
});
});
});
return promise;
}

按照以下链接使用 ionic2 进行超级应用程序克隆 Youtube Link / Github Link

【讨论】：

tnx，但它显示 'loadingCtrl' 和 'this.map = this.initMap();' 的错误
我知道了，但这一行仍然有错误：this.map = this.initMap(); 并键入 promise is not assignable .
可以发控制台截图吗？
@Reza 已做出更改回答，我已导入 Geolocation 并在导出内设置 map:any;
让我们continue this discussion in chat.

【解决方案2】：

我唯一要做的就是在Geolocation.getCurrentPosition() 函数的末尾调用this.Marker();。非常感谢 Josh Morony。

【讨论】：