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

我找到了解决方案。创建谷歌地图有两种方法：

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);
});