@ capacor/ google- maps

Capacitor 上的 Google 地图

安装

npm install @capacitor/google-maps
npx cap sync

API 密钥

要在任意平台上使用 Google Maps SDK, 与账户相关的 API 密钥 启用计费 需要这样做。 这些都可以从下列来源获得: 谷歌云控台。所有三个平台,Android、iOS和Javascript都需要这样做。 关于获取这些 API 密钥的更多信息,请访问 Google 地图文档 每个平台.

iOS系统

Google Maps SDK 支持通过 enableCurrentLocation(bool)。要使用此功能,苹果公司需要指定隐私描述 Info.plist数字 :

• NSLocationWhenInUseUsageDescription (单位:千美元)Privacy - Location When In Use Usage Description(中文(简体) )

阅读 配置 Info.plist 输入 iOS 指南 在 Xcode 中设置 iOS 权限的更多信息.

键入符配置

你的项目也需要 skipLibCheck 设置为 true 内 tsconfig.json。 。 。 .

从旧版本迁移

Google Maps SDK主要支持在苹果硅Macs上的模拟器上运行,但要确保您有最新版本的 谷歌- 马普斯- iOS- Utils 已安装.

如果您为获得未发行版本添加了先前的工作环路, 您可以删除此行 ios/App/Podfile数字 :

pod 'Google-Maps-iOS-Utils', :git => 'https://github.com/googlemaps/google-maps-ios-utils.git', :commit => '637954e5bcb2a879c11a6f2cead153a6bad5339f'

然后运行 pod update Google-Maps-iOS-Utils 从 ios/App/ 文件夹 :

cd ios/App
pod update Google-Maps-iOS-Utils

机器人

Android的Google Maps SDK需要您将您的API密钥添加到您的项目中的AndroidManifest.xml文件中.

<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY_HERE"/>

要使用某些位置特性, SDK 需要以下权限才能添加到您的 AndroidManifest.xml 中:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

变量

此插件将使用以下工程变量( 在您的应用程序中定义) variables.gradle 文件名 :

• googleMapsPlayServicesVersion页:1 com.google.android.gms:play-services-maps (默认 : 19.2.0(中文(简体) )
• googleMapsUtilsVersion页:1 com.google.maps.android:android-maps-utils (默认 : 3.19.1(中文(简体) )
• googleMapsKtxVersion页:1 com.google.maps.android:maps-ktx (默认 : 5.2.1(中文(简体) )
• googleMapsUtilsKtxVersion页:1 com.google.maps.android:maps-utils-ktx (默认 : 5.2.1(中文(简体) )
• kotlinxCoroutinesVersion页:1 org.jetbrains.kotlinx:kotlinx-coroutines-android 财务报告和审定财务报表 org.jetbrains.kotlinx:kotlinx-coroutines-core (默认 : 1.10.2(中文(简体) )
• androidxCoreKTXVersion页:1 androidx.core:core-ktx (默认 : 1.17.0(中文(简体) )
• kotlin_version页:1 org.jetbrains.kotlin:kotlin-stdlib (默认 : 2.2.20(中文(简体) )

使用量

Google Maps Capacitor 插件船, 带有网络组件, 必须用于在您的应用程序中渲染地图, 因为它使我们能够更有效地将本地视图嵌入到 iOS 上 。 插件将自动注册此网页组件供您在应用程序中使用 .

对于角用户,您会得到一个错误警告,这个网络组件对于角编译器来说是未知的. 通过修改宣布您组件的模块以允许自定义的网络组件来解决这个问题.

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

在您的 HTML 中包含此组件, 并指定一个ID, 以便您以后可以轻松查询该元素引用 .

<capacitor-google-map id="map"></capacitor-google-map>

在Android上,地图会在整个网页视图下渲染出,并在滚动事件期间使用此组件来管理其定位. 这意味着作为开发者,你 必须 确保网页视图的透明性贯穿各层至最下层。 在一个典型的Ionic应用中,这意味着在IonContent和根 HTML标签等元素上设定透明度,以确保可以看到. 如果你在Android上看不到地图,这应该是你检查的第一件事.

在iOS上,我们直接将地图放入网页视图,因此不需要同样的透明度效果. 我们正在调查Android的替代方法,希望在未来更新中能更好地解决这个问题.

Google Map 元素本身没有风格化,所以您应该将其风格化以适应您页面结构的布局. 因为我们把一个视图放进这个槽里, 元素本身没有宽度或高度, 所以请明确设置这些.

capacitor-google-map {
  display: inline-block;
  width: 275px;
  height: 400px;
}

接下来,我们应该创建地图参考。 其方法是从Capacitor插件中导入GoogleMap类,并调用创建方法,并传入需要的参数.

import { GoogleMap } from '@capacitor/google-maps';

const apiKey = 'YOUR_API_KEY_HERE';

const mapRef = document.getElementById('map');

const newMap = await GoogleMap.create({
  id: 'my-map', // Unique identifier for this map instance
  element: mapRef, // reference to the capacitor-google-map element
  apiKey: apiKey, // Your Google Maps API Key
  config: {
    center: {
      // The initial position to be rendered by the map
      lat: 33.6,
      lng: -117.9,
    },
    zoom: 8, // The initial zoom level to be rendered by the map
  },
});

此时, 您的地图应该在您的应用中创建 。 使用返回到地图的引用,您可以轻松地以多种方式与您的地图交互,其中的几个在这里显示.

const newMap = await GoogleMap.create({...});

// Add a marker to the map
const markerId = await newMap.addMarker({
  coordinate: {
    lat: 33.6,
    lng: -117.9
  }
});

// Move the map programmatically
await newMap.setCamera({
  coordinate: {
    lat: 33.6,
    lng: -117.9
  }
});

// Enable marker clustering
await newMap.enableClustering();

// Handle marker click
await newMap.setOnMarkerClickListener((event) => {...});

// Clean up map reference
await newMap.destroy();

完整示例

角质

import { GoogleMap } from '@capacitor/google-maps';

@Component({
  template: `
    <capacitor-google-map #map></capacitor-google-map>
    <button (click)="createMap()">Create Map</button>
  `,
  styles: [
    `
      capacitor-google-map {
        display: inline-block;
        width: 275px;
        height: 400px;
      }
    `,
  ],
})
export class MyMap {
  @ViewChild('map')
  mapRef: ElementRef<HTMLElement>;
  newMap: GoogleMap;

  async createMap() {
    this.newMap = await GoogleMap.create({
      id: 'my-cool-map',
      element: this.mapRef.nativeElement,
      apiKey: environment.apiKey,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8,
      },
    });
  }
}

反应

import { GoogleMap } from '@capacitor/google-maps';
import { useRef } from 'react';

const MyMap: React.FC = () => {
  const mapRef = useRef<HTMLElement>();
  let newMap: GoogleMap;

  async function createMap() {
    if (!mapRef.current) return;

    newMap = await GoogleMap.create({
      id: 'my-cool-map',
      element: mapRef.current,
      apiKey: process.env.REACT_APP_YOUR_API_KEY_HERE,
      config: {
        center: {
          lat: 33.6,
          lng: -117.9
        },
        zoom: 8
      }
    })
  }

  return (
    <div className="component-wrapper">
      <capacitor-google-map ref={mapRef} style={{
        display: 'inline-block',
        width: 275,
        height: 400
      }}></capacitor-google-map>

      <button onClick={createMap}>Create Map</button>
    </div>
  )
}

export default MyMap;

您可能需要创建一个 *.d.ts react 中自定义元素的文件 :

// custom-elements.d.ts

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "capacitor-google-map": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      >;
    }
  }
}

export {};

阴道

<script lang="ts" setup>
import { ref, shallowRef, useTemplateRef } from 'vue'
import { GoogleMap } from '@capacitor/google-maps'

const mapRef = useTemplateRef<HTMLElement>('mapRef')
const newMap = shallowRef<GoogleMap>()

async function createMap() {
  if (!mapRef.value) return

  newMap.value = await GoogleMap.create({
    id: 'my-cool-map',
    element: mapRef.value,
    apiKey: import.meta.env.VITE_YOUR_API_KEY_HERE,
    config: {
      center: {
        lat: 33.6,
        lng: -117.9,
      },
      zoom: 8,
    },
  })
}
</script>

<template>
  <capacitor-google-map
    ref="mapRef"
    style="display: inline-block; width: 275px; height: 400px"
  ></capacitor-google-map>
  <button @click="createMap()">Create Map</button>
</template>

确保您需要启用 承认本地习惯元素 喜欢

// vite.config.mts > plugins
Vue({
  template: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('capacitor-')
    },
  },
}),

Javascript

<capacitor-google-map id="map"></capacitor-google-map>
<button onclick="createMap()">Create Map</button>

<style>
  capacitor-google-map {
    display: inline-block;
    width: 275px;
    height: 400px;
  }
</style>

<script>
  import { GoogleMap } from '@capacitor/google-maps';

  const createMap = async () => {
    const mapRef = document.getElementById('map');

    const newMap = await GoogleMap.create({
      id: 'my-map', // Unique identifier for this map instance
      element: mapRef, // reference to the capacitor-google-map element
      apiKey: 'YOUR_API_KEY_HERE', // Your Google Maps API Key
      config: {
        center: {
          // The initial position to be rendered by the map
          lat: 33.6,
          lng: -117.9,
        },
        zoom: 8, // The initial zoom level to be rendered by the map
      },
    });
  };
</script>

API 密码

• create(...)
• enableTouch()
• disableTouch()
• enableClustering(...)
• disableClustering()
• addTileOverlay(...)
• removeTileOverlay(...)
• addMarker(...)
• addMarkers(...)
• removeMarker(...)
• removeMarkers(...)
• addPolygons(...)
• removePolygons(...)
• addCircles(...)
• removeCircles(...)
• addPolylines(...)
• removePolylines(...)
• destroy()
• setCamera(...)
• getMapType()
• setMapType(...)
• enableIndoorMaps(...)
• enableTrafficLayer(...)
• enableAccessibilityElements(...)
• enableCurrentLocation(...)
• setPadding(...)
• getMapBounds()
• fitBounds(...)
• setOnBoundsChangedListener(...)
• setOnCameraIdleListener(...)
• setOnCameraMoveStartedListener(...)
• setOnClusterClickListener(...)
• setOnClusterInfoWindowClickListener(...)
• setOnInfoWindowClickListener(...)
• setOnMapClickListener(...)
• setOnMarkerClickListener(...)
• setOnPolygonClickListener(...)
• setOnCircleClickListener(...)
• setOnPolylineClickListener(...)
• setOnMarkerDragStartListener(...)
• setOnMarkerDragListener(...)
• setOnMarkerDragEndListener(...)
• setOnMyLocationButtonClickListener(...)
• setOnMyLocationClickListener(...)
• 接口
• 类型异名
• 数字

创建(...)

create(options: CreateMapArgs, callback?: MapListenerCallback<MapReadyCallbackData> | undefined) => Promise<GoogleMap>

回返情况: Promise<GoogleMap>

启用Touch( )

enableTouch() => Promise<void>

禁用Touch( )

disableTouch() => Promise<void>

启用组合(...)

enableClustering(minClusterSize?: number | undefined) => Promise<void>

禁用分类( C)

disableClustering() => Promise<void>

添加 Tile 覆盖(...)

addTileOverlay(tileOverlay: TileOverlay) => Promise<{ id: string; }>

回返情况: Promise<{ id: string; }>

删除 Tile 覆盖(...)

removeTileOverlay(id: string) => Promise<void>

添加马克(...)

addMarker(marker: Marker) => Promise<string>

回返情况: Promise<string>

添加马克(...)

addMarkers(markers: Marker[]) => Promise<string[]>

回返情况: Promise<string[]>

删除马克(...)

removeMarker(id: string) => Promise<void>

删除马克(...)

removeMarkers(ids: string[]) => Promise<void>

添加波利贡斯(...)

addPolygons(polygons: Polygon[]) => Promise<string[]>

回返情况: Promise<string[]>

删除波利贡斯(...)

removePolygons(ids: string[]) => Promise<void>

添加循环(...)

addCircles(circles: Circle[]) => Promise<string[]>

回返情况: Promise<string[]>

删除圆环(...)

removeCircles(ids: string[]) => Promise<void>

添加 Polylines (...)

addPolylines(polylines: Polyline[]) => Promise<string[]>

回返情况: Promise<string[]>

删除 Polylines (...)

removePolylines(ids: string[]) => Promise<void>

销毁()

destroy() => Promise<void>

设置 Camera (...)

setCamera(config: CameraConfig) => Promise<void>

获取MapType ()

getMapType() => Promise<MapType>

获取当前映射类型

回返情况: Promise<MapType>

设置MapType(...)

setMapType(mapType: MapType) => Promise<void>

启用室内地图(...)

enableIndoorMaps(enabled: boolean) => Promise<void>

启用 TrafficLayer (...)

enableTrafficLayer(enabled: boolean) => Promise<void>

启用可获取性元素(...)

enableAccessibilityElements(enabled: boolean) => Promise<void>

启用当前位置(...)

enableCurrentLocation(enabled: boolean) => Promise<void>

设定板(...)

setPadding(padding: MapPadding) => Promise<void>

获取地图框( )

getMapBounds() => Promise<LatLngBounds>

获取地图当前取景口纬度和经度界限.

回返情况: Promise<LatLngBounds>

适界(...)

fitBounds(bounds: LatLngBounds, padding?: number | undefined) => Promise<void>

设置地图视图端口以包含给定的界限.

设置于 BundsChanged listener (...)

setOnBoundsChangedListener(callback?: MapListenerCallback<CameraIdleCallbackData> | undefined) => Promise<void>

设置为 Cameraidle 聆听器(...)

setOnCameraIdleListener(callback?: MapListenerCallback<CameraIdleCallbackData> | undefined) => Promise<void>

设置为 OnCamera Move Started listener (...)

setOnCameraMoveStartedListener(callback?: MapListenerCallback<CameraMoveStartedCallbackData> | undefined) => Promise<void>

设置在 ClusterClick 听器(...)

setOnClusterClickListener(callback?: MapListenerCallback<ClusterClickCallbackData> | undefined) => Promise<void>

设置于 ClusterInfoWindowClick 听取器(...)

setOnClusterInfoWindowClickListener(callback?: MapListenerCallback<ClusterClickCallbackData> | undefined) => Promise<void>

设置于InfoWindowClick 听器(...)

setOnInfoWindowClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>

在MapClick Listener上设置(...)

setOnMapClickListener(callback?: MapListenerCallback<MapClickCallbackData> | undefined) => Promise<void>

设定在 MarkerClick 听取器(...)

setOnMarkerClickListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>

仅设定为Polygon Click 听取器(...)

setOnPolygonClickListener(callback?: MapListenerCallback<PolygonClickCallbackData> | undefined) => Promise<void>

设置在 CircleClick 听器(...)

setOnCircleClickListener(callback?: MapListenerCallback<CircleClickCallbackData> | undefined) => Promise<void>

仅设置Polyline Click 听取器(...)

setOnPolylineClickListener(callback?: MapListenerCallback<PolylineCallbackData> | undefined) => Promise<void>

设置在 MarkerDragStart 听牌(...)

setOnMarkerDragStartListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>

设置在 MarkerDrag 听取器上(...)

setOnMarkerDragListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>

设置于 MarkerDragEnd 听取器(...)

setOnMarkerDragEndListener(callback?: MapListenerCallback<MarkerClickCallbackData> | undefined) => Promise<void>

设置在 MyLocation ButtonClick 听器上(...)

setOnMyLocationButtonClickListener(callback?: MapListenerCallback<MyLocationButtonClickCallbackData> | undefined) => Promise<void>

设置于 MyLocationClick 听取器(...)

setOnMyLocationClickListener(callback?: MapListenerCallback<MapClickCallbackData> | undefined) => Promise<void>

接口

创建MapArgs

一个包含创建地图时所使用的选项的界面 .

GoogleMapConfig 图像

对于网页,所有 Javascript Google 地图选项均可作为 GoogleMapConfig 扩展google.maps. 地图选项. 对于iOS和Android,只声明配置选项 GoogleMapConfig 图像 备有.

连线

代表一对经纬度坐标的接口.

映射调回数据

拼图

平板覆盖是放置在您地图上的特定缩放级的图像 。 可在iOS、Android和Web上查阅

标记

标记是放置在地图表面特定点上的一个图标.

大小

点

多边形

对于网络,所有的javascript 多边形 选项可用 多边形扩展了google.maps. 多边形选项. 对于iOS和Android,只声明配置选项 多边形 备有.

圆形

对于网络,所有的javascript 圆形 选项可用 圆能延伸出google.maps. 圆可选. 对于iOS和Android,只声明配置选项 圆形 备有.

复线

对于网络,所有的javascript 复线 选项可用 Polyline扩展了google.maps. 复行可选. 对于iOS和Android,只声明配置选项 复线 备有.