TypeError：map.addMarker不是函数

Question

我无法通过地图对象调用任何函数。

地图可以正常工作，但是我需要添加标记或调用任何函数，我无法做到这一点。

我的代码或插件有问题吗？

   // create location object
   const location = new google.maps.LatLng('24.713552', '46.675296');

   // create options object
   const options = {
       center:location, 
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       draggable: true 
     };

   // create location object
   const map = new google.maps.Map(this.mapRef.nativeElement, options);

    map.off();// this for e.g.
   map.addMarker(markerOptions ).then(marker => {
    //alert(marker);
  });// or this

请检查package.json中的插件

"@angular/animations": "^5.2.11",
"@angular/common": "^5.2.11",
"@angular/compiler": "^5.2.11",
"@angular/compiler-cli": "^5.2.11",
"@angular/core": "^5.2.11",
"@angular/forms": "^5.2.11",
"@angular/http": "^5.2.11",
"@angular/platform-browser": "^5.2.11",
"@angular/platform-browser-dynamic": "^5.2.11",
"@angular/router": "^5.2.11",
"@ionic-native/core": "^4.9.1",
"@ionic-native/geolocation": "^4.11.0",
"@ionic-native/splash-screen": "4.7.0",
"@ionic-native/status-bar": "4.7.0",
"@ionic/pro": "1.0.20",
"@ionic/storage": "2.1.3",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.1",
"com-sarriaroman-photoviewer": "~1.1.18",
"cordova": "^8.0.0",
"cordova-android": "^7.0.0",
"cordova-common": "^2.2.5",
"cordova-plugin-device": "~2.0.2",
"cordova-plugin-device-motion": "^2.0.1",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git#2.7.0",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-shake": "^0.6.0",
"cordova-plugin-splashscreen": "~5.0.2",
"cordova-plugin-whitelist": "~1.3.3",
"cordova-plugin-x-socialsharing": "~5.4.1",
"cordova-sqlite-storage": "^2.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"minimist": "^1.2.0",
"moment": "^2.22.2",
"ng-lazyload-image": "^3.4.2",
"platform": "1.3.5",
"rxjs": "^5.5.11",
"sw-toolbox": "3.6.0",
"uuid": "^3.2.1",
"xml2js": "^0.4.19",
"zone.js": "0.8.26"


  "cordova-sqlite-storage": {},
  "cordova-plugin-whitelist": {},
  "cordova-plugin-device": {},
  "cordova-plugin-splashscreen": {},
  "cordova-plugin-ionic-webview": {},
  "cordova-plugin-ionic-keyboard": {},
  "com-sarriaroman-photoviewer": {},
  "cordova-plugin-x-socialsharing": {},
  "cordova-plugin-device-motion": {},
  "cordova-plugin-shake": {},
  "cordova-plugin-googlemaps": {
    "API_KEY_FOR_ANDROID": "AIzaSyC4d2sLV_TD274bRUqNqBtGtDVUZFURM3k",
    "API_KEY_FOR_IOS": "AIzaSyC4d2sLV_TD274bRUqNqBtGtDVUZFURM3k",
    "PLAY_SERVICES_VERSION": "11.8.0",
    "ANDROID_SUPPORT_V4_VERSION": "24.1.0"
  },
  "cordova-plugin-geolocation": {}

我只用浏览器测试应用程序。

Answer 1

好像在页面组件加载生命周期方法（ionViewDidLoad）期间，您调用DisplayMap方法，该方法内部具有“ this”引用，该引用开始指向其自身的作用域，而不是组件的作用域。尝试使用粗箭头功能分配更改该方法。这样，DisplayMap方法将不会创建自己的“ this”指针：

参见下文：

import { NavController, Platform, AlertController, ToastController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';
import { Storage } from '@ionic/storage';   
import { AddressService } from '../../Providers/address.service';
import { ApiDomain } from '../../Providers/constant';
import { CartPage } from '../cart/cart';  
import { Component, ViewChild, ElementRef } from '@angular/core';

declare var google: any;

@Component({
  selector: 'page-chooselocation',
  templateUrl: 'chooselocation.html'
})

export class ChooseLocationPage {

  rootUrl: String = "";   


  animationsOptions = {
    animation: 'ios-transition',
    duration: 1000
  }

  @ViewChild('map') mapRef : ElementRef; 

  // constructor
  constructor( public platform: Platform,
              public storage: Storage,
              public alertCtrl: AlertController,
              public toastCtrl: ToastController,
              public navCtrl: NavController, 
              public translate: TranslateService, 
              public service: AddressService) {

      // read root URL
      this.rootUrl = ApiDomain.rootUrl;

  } 

  // ion view did load
  ionViewDidLoad()
  {    
      // display map
      this.DisplayMap(); 
  }


  // display map
  DisplayMap = () => {    
       // read current location

       // create location object
       const location = new google.maps.LatLng('24.713552', '46.675296');

       // create options object
       const options = {
           center:location, 
           zoom: 10,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           draggable: true 
         };

       // create location object
       const map = new google.maps.Map(this.mapRef.nativeElement, options);

       const markerOptions = {
         position: location, 
         animation: google.maps.Animation.BOUNCE
       };


       map.addMarker(markerOptions ).then(marker => {
             alert(marker);
       });



  } 

} 

或者，您可以尝试将本机元素引用作为参数传递给DisplayMap方法，但我不确定ionViewDidLoad方法期间this.mapRef.nativeElement引用是否为“就绪”，因此最好检查其是否有效。

import { NavController, Platform, AlertController, ToastController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';
import { Storage } from '@ionic/storage';   
import { AddressService } from '../../Providers/address.service';
import { ApiDomain } from '../../Providers/constant';
import { CartPage } from '../cart/cart';  
import { Component, ViewChild, ElementRef } from '@angular/core';

declare var google: any;

@Component({
  selector: 'page-chooselocation',
  templateUrl: 'chooselocation.html'
})

export class ChooseLocationPage {

  rootUrl: String = "";   


  animationsOptions = {
    animation: 'ios-transition',
    duration: 1000
  }

  @ViewChild('map') mapRef : ElementRef; 

  // constructor
  constructor( public platform: Platform,
              public storage: Storage,
              public alertCtrl: AlertController,
              public toastCtrl: ToastController,
              public navCtrl: NavController, 
              public translate: TranslateService, 
              public service: AddressService) {

      // read root URL
      this.rootUrl = ApiDomain.rootUrl;

  } 

  // ion view did load
  ionViewDidLoad()
  {    
      // display map
      this.DisplayMap(this.mapRef.nativeElement); 
  }


  // display map
  DisplayMap(mapRef) {    
       // read current location

       // create location object
       const location = new google.maps.LatLng('24.713552', '46.675296');

       // create options object
       const options = {
           center:location, 
           zoom: 10,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           draggable: true 
         };

       // create location object
       const map = new google.maps.Map(mapRef, options);

       const markerOptions = {
         position: location, 
         animation: google.maps.Animation.BOUNCE
       };


       map.addMarker(markerOptions ).then(marker => {
             alert(marker);
       });



  } 

} 

Answer 2

我找到了解决方案。创建Google Map的方法有两种：

1- JavaScript端，例如：

   // create location object
   const location = new google.maps.LatLng('24.713552', '46.675296');

   // create options object
   const options = {
       center:location, 
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       draggable: true 
     };

   // create location object
   const map = new google.maps.Map(this.mapRef.nativeElement, options);

2-本机面，例如：

this.map = GoogleMaps.create('address-map', mapOptions);

当我尝试在它们之间混合时的主要问题是，所以我无法在JavaScript端调用addmarker。

完整的解决方案是：

   // create location object
   const location = new google.maps.LatLng('24.713552', '46.675296');

   // create options object
   const options = {
       center:location, 
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       draggable: true 
     };

   // create location object
   const map = new google.maps.Map(mapRef, options);

   // call add marker
   this.marker = this.AddMarker(location, map);

   // call add listener
   google.maps.event.addListener(this.marker, 'dragend', () => {
        // toggle bounce
        this.toggleBounce(this.marker);
   });

   // call add listener
   google.maps.event.addListener(this.marker, 'click', () => {
   // alert(this.marker);
   });