Nativescript Plugin Google Places

Nativescript 的 Google 地点 API 插件

更新

先决条件

在安装此插件之前设置 Google 地点 API 密钥，设置脚本将请求它们。

对于 iOS 密钥，点击此处然后点击“获取密钥”。

对于 Android 密钥

1. 点击此处然后点击“获取密钥”。
2. 转到Google 开发者控制台并点击左侧的“凭据”。
3. 点击列表中的第一个密钥，即您刚才创建的密钥，然后在“密钥限制”下选择 Android 应用程序。
4. 输入您的包名和 SHA-1 证书指纹，然后在底部点击保存。您可能还想添加您的调试和生产 SHA-1 指纹。

如果您想使用 getStaticMapUrl 函数，则需要创建一个浏览器密钥

1. 点击此处然后点击“获取密钥”。
2. 转到Google 开发者控制台并点击左侧的“库”。
3. 找到“Google 静态地图 API”并点击“URL 签名密钥”选项卡。
4. 点击“允许未签名使用”按钮。
5. 点击左侧的“凭据”，您的浏览器密钥将是列表中的第一个密钥。

安装

tns plugin add nativescript-plugin-google-places

使用

要导入

import * as GooglePlaces from 'nativescript-plugin-google-places';

如果使用 angular，则在 App.Module 构造函数中运行 init 函数；否则在 app.ts 文件中运行

GooglePlaces.init();

让用户选择地点

GooglePlaces.pickPlace()
    .then(place => console.log(JSON.stringify(place)))
    .catch(error => console.log(error));

为地图设置默认位置以开始

let center: Location = {
    latitude: -33.865143,
    longitude: 151.2099
}

let viewport = {
    northEast: {
        latitude: center.latitude + 0.001,
        longitude: center.longitude + 0.001
    },
    southWest: {
        latitude: center.latitude - 0.001,
        longitude: center.longitude - 0.001
    }
}

GooglePlaces.pickPlace(viewport)
    .then(place => console.log(JSON.stringify(place)))
    .catch(error => console.log(error));

使用 ids 获取地点

GooglePlaces.getPlacesById([
    "ChIJ4zPXqIiAhYAR31X3S64T6Uw",
    "ChIJ6zMe3oWAhYARaZ33Z1BAMRo",
    "ChIJAUWoGIaAhYARQ6zvky_f10Q"
])
    .then((places: GooglePlaces.Place[]) => {
        places.forEach(place => console.log(place.name));
    })
    .catch(error => console.log(error));

获取静态地图

this.staticMapUrl = GooglePlaces.getStaticMapUrl(
    place, 
    { 
        width: 250,
        height: 250
    }
);

或通过地址

this.staticMapUrl = GooglePlaces.getStaticMapUrlByAddress(
    place.address,
    {
        width: 250,
        height: 250
    }
);

<Image *ngIf="staticMapUrl" [src]="staticMapUrl" width="250" height="250"></Image>

最佳实践

• Google 建议始终在可用时显示归属字符串，当使用地点数据时。
• Google 要求在地图之外使用地点数据时，必须在地点数据旁边放置“由 Google 提供”的图片。如果允许在设置脚本期间安装，则插件会安装此图片。

您可以使用浅色版本

<Image res="res://powered_by_google_light" stretch="none"></Image>

或深色版本

<Image res="res://powered_by_google_dark" stretch="none"></Image>

API

更新

v1.1.2

• 修复了 iOS 的一个错误，其中在平移地图时会破坏解析承诺的链接，导致用户卡在地图视图中。
• 安装脚本现在由于cocoapods版本无法访问，已手动添加iOS图像。如果是在更新而不是第一次安装，请运行

cd node_modules/nativescript-plugin-google-places && npm run configure

v1.2.0

• 添加了getPlacesById(id: string[]): Place[]
• 修复了Android错误，placepicker返回的地点信息不全

v1.2.1

• 修复了设置错误，重新配置后ios密钥没有被替换
• 修复了getPlacesById错误，ios结果被返回为倒序
• 为getPlacesById添加了错误处理，如果无法找到所有地点

现在您可以确信从getPlacesById获取的地点数组与您发送的ids数量相同，并且顺序相同。

v1.3.0

• 添加了getStaticMapUrl(place: Place, options: { width: number, height: number }): string
• 更新了安装程序以请求浏览器密钥用于静态地图。运行npm run configure以更新

v1.3.1

• 在地点定义中添加了"types"。

v1.4.1

• 添加了getStaticMapUrlByAddress(address: string, options: { width: number, height: number }): string