离子电容器谷歌地图 setMapType 不工作

Question

我正在使用来自 @capacitor/google-maps 插件的 GoogleMap。 我正在尝试将 map 类型从普通更改为卫星。 但这是行不通的。

 await this.map.setMapType(MapType.Satellite);

Answer 1

我最近找到了解决这个问题的方法。 为浏览器和本机设备集成 2 个独立的功能。

对于浏览器：

async createMapForWeb(map: ElementRef) {
this.map = await GoogleMap.create({
  id: "capacitor-google-maps",
  element: map.nativeElement,
  apiKey: environment.browserKey,
  config: {
    zoom: 18,
    mapTypeControl: false,
    center: {
      lat: this.location.lat,
      lng: this.location.lng,
    },
    mapTypeId: "satellite",
    disableDefaultUI: true,
  },
  forceCreate: true,
});

}

对于本机设备：

async createMapForDevice(map: ElementRef) {
this.map = await GoogleMap.create({
  id: "capacitor-google-maps",
  element: map.nativeElement,
  apiKey: environment.browserKey,
  config: {
    zoom: 18,
    mapTypeControl: false,
    center: {
      lat: this.location.lat,
      lng: this.location.lng,
    },
    disableDefaultUI: false,
  },
  forceCreate: true,
});
await this.map.setMapType(MapType.Satellite);}

Answer 2

在下面扩展 Ariyan Ashfaque 的回答：

您可以使用Capacitor.isNativePlatform()来识别浏览器/本机设备。

import { Capacitor } from '@capacitor/core'; 

const createMap = async () => {
  if (!mapRef.current) return;
  if (Capacitor.isNativePlatform()) {
    console.warn('Native Platform Map');
    newMap = await GoogleMap.create({
      id: 'google-map',
      element: mapRef.current,
      apiKey: CONFIG.GOOGLE_MAPS_API_KEY,
      config: mapConfig,
      forceCreate: true,
    });
    await newMap.setMapType(MapType.Satellite);
    await newMap.enableCurrentLocation(true);
  } else {
    console.warn('Browser Map');
    newMap = await GoogleMap.create({
      id: 'google-map',
      element: mapRef.current,
      apiKey: CONFIG.GOOGLE_MAPS_API_KEY,
      config: mapConfig,
      forceCreate: true,
    });
  }
  await newMap.addMarker({
    coordinate: {
      lat: props?.geoLocation?.latitude,
      lng: props?.geoLocation?.longitude,
    },
    title: 'Marker Title',
  });
  await Geolocation.getCurrentPosition();
};