,需要进行以下步骤:
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY="YOUR_API_KEY"
请将YOUR_API_KEY替换为您自己的Google Maps API密钥。
ionic generate page google-maps
这将在src/app目录下创建一个名为google-maps的新页面。
import { Component, OnInit } from '@angular/core';
import { GoogleMaps, GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';
@Component({
selector: 'app-google-maps',
templateUrl: './google-maps.page.html',
styleUrls: ['./google-maps.page.scss'],
})
export class GoogleMapsPage implements OnInit {
map: GoogleMap;
constructor(private googleMaps: GoogleMaps) { }
ngOnInit() {
this.loadMap();
}
loadMap() {
this.map = this.googleMaps.create('map_canvas');
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
console.log('Map is ready!');
});
}
}
在上面的代码中,我们导入了Google Maps相关的类,并在loadMap()方法中创建了一个新的地图实例。
import { Component, OnInit } from '@angular/core';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, Marker, MarkerOptions } from '@ionic-native/google-maps';
@Component({
selector: 'app-google-maps',
templateUrl: './google-maps.page.html',
styleUrls: ['./google-maps.page.scss'],
})
export class GoogleMapsPage implements OnInit {
map: GoogleMap;
constructor(private googleMaps: GoogleMaps) { }
ngOnInit() {
this.loadMap();
}
loadMap() {
this.map = this.googleMaps.create('map_canvas');
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
console.log('Map is ready!');
this.addMarker();
});
}
addMarker() {
const markerOptions: MarkerOptions = {
position: { lat: 37.7749, lng: -122.4194 },
title: 'San Francisco'
};
this.map.addMarker(markerOptions).then((marker: Marker) => {
marker.showInfoWindow();
marker.on(GoogleMapsEvent.INFO_CLICK).subscribe(() => {
console.log('Info window clicked!');
});
});
}
}
在上面的代码中,我们使用addMarker()方法来添加一个标记,并在标记上显示信息窗口。然后,我们使用marker.on()方法来订阅INFO_CLICK事件,并在事件回调函数中处理点击信息窗口的逻辑。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GoogleMapsPage } from './google-maps/google-maps.page';
const routes: Routes = [
{
path: 'google-maps',
component: GoogleMapsPage
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的代码中,我们将'/google-maps'路径映射到GoogleMapsPage组件。
现在,您可以在Ionic项目中使用Google Maps页面,并实现GoogleMap.OnInfoWindowClickListener。当点击信息窗口时,将触发相应的事件回调函数。
领取专属 10元无门槛券
手把手带您无忧上云