我是离子（以及一般的网络编程）的新手，并尝试构建一个涉及Google Maps JS API的小应用程序。我已成功创建，加载了地图并在其上创建了自定义控件（下拉选择菜单），但无法从onchange事件执行特定功能（'openListCuaHangModal'是名称）。总是以“this.openListCuaHangModal不是函数”结束。 :(
任何人都可以帮助我更深入地了解这件事。非常感谢。
这是.ts文件中的代码：
export class ChonDiemGiaoDichPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
public diemGiaoDich: any;
constructor(public modalCtrl: ModalController, public navCtrl: NavController, public http: Http, public navParams: NavParams, public viewCtrl: ViewController, public geolocation: Geolocation) {
}
ionViewDidLoad() {
this.diemGiaoDich = this.navParams.get('results');
console.log(this.diemGiaoDich);
**//this is where the map would be loaded**
this.loadMap(this.modalCtrl, this.openListCuaHangModal);
}
addInfoWindow(marker, content) {
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
**//the function I'm trying to call**
openListCuaHangModal(khuvuc) {
let myModal = this.modalCtrl.create(ListCuaHangPage, khuvuc);
myModal.present();
}
loadMap() {
//use dynamic geolocation
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//set options for map
let mapOptions = {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{ elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
{ elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
{ elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{ color: '#263c3f' }]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{ color: '#6b9a76' }]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{ color: '#38414e' }]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{ color: '#212a37' }]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{ color: '#9ca5b3' }]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{ color: '#746855' }]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{ color: '#1f2835' }]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{ color: '#f3d19c' }]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{ color: '#2f3948' }]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{ color: '#17263c' }]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{ color: '#515c6d' }]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{ color: '#17263c' }]
}
]
}
//initialize the map
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
//add custom control
var centerControlDiv = document.createElement('div');
// var centerControl = new this.CenterControl (centerControlDiv, this.map);
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '0px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.style.marginTop = '15px';
// controlUI.title = '';
centerControlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
if (this.diemGiaoDich != null) {
**//this is where it go wrong with the onchange**
var html = '<select id="diemGiaoDichDropbox" onchange="this.openListCuaHangModal(this.value)><option value="" disabled selected hidden>Chọn Điểm Giao Dịch</option>';
for (let diemGD of this.diemGiaoDich) {
html += '<option value="' + diemGD.ID_khuvuc + '">' + diemGD.KhuVuc + '</option>';
}
controlText.innerHTML = html + '</select>';
}
else
console.log("Khong thay diem GiaoDich");
controlUI.appendChild(controlText);
// Setup the click event listeners for the custom control
controlUI.addEventListener('click', function () {
//map.setCenter(chicago);
});
// centerControlDiv.index = 1;
this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
//set marker for the current location
var justMarker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: latLng,
title: "nothing to show"
});
justMarker.setMap(this.map);
let content = "<h4>Vị trí hiện tại!</h4>";
//add infoWindow for marker
this.addInfoWindow(justMarker, content);
//set marker for all of the offices
var officesMarker;
for (let diemGD of this.diemGiaoDich) {
for (let cuahang of diemGD.CuaHang) {
officesMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
position: new google.maps.LatLng(cuahang.Lat, cuahang.Lng),
});
officesMarker.setMap(this.map);
var ID_cuahang = cuahang.ID_cuahang;
//set listerner on click event to office markers and go to the booking page
officesMarker.addListener('click', function () {
let myModal = this.modalCtrl.create(ChiTietCuaHangPage, diemGD, ID_cuahang);
myModal.present();
});
}
}
}, (err) => {
console.log(err);
});
}
}
（我不能发表评论所以我会在这里给你一个答案）
您试图调用的onchange函数不在class ChonDiemGiaoDichPage的上下文中。所以它无法找到它。