Nativescript Google Place SDK

一个用于 Google Places SDK 的 Nativescript 插件。

文档

要求

如果尚未启用，请启用 Google Places API。

在 tsconfig.json 中配置跳过库检查

{
  "compilerOptions": {
    ...
    "skipLibCheck": true
    ...
  }
}

安装

tns plugin add nativescript-google-place-sdk

使用

NativeScript

初始化地点 SDK

app.ts

...
Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
...

显示自动完成 UI

my-awesome-page.xml

<Button text="Search" tap="search()"></Button>

my-awesome-page.ts

export function search(): void {
    PlaceAutocomplete.show()
    .then(
        (result) => {
            if (result) {
                console.log('Place Details:', result);
            }
        },
        (err) => console.error(err)
    );
}

NativeScript + Angular

初始化地点 SDK

app.component.ts

@Component({
    moduleId: module.id,
    selector: 'ns-app',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
    ngOnInit(): void {
        Place.initialize(isAndroid ? 'GOOGLE_PLACE_ANDROID_API_KEY' : 'GOOGLE_PLACE_IOS_API_KEY');
    }
}

显示自动完成 UI

my-awesome.component.html

<Button [text]="Search" (tap)="search()"></Button>

my-awesome.component.ts

@Component({
    moduleId: module.id,
    selector: 'ns-awesome',
    templateUrl: 'my-awesome.component.html'
})
export class MyAwesomeComponent {
    search(): void {
        PlaceAutocomplete.show()
        .then(
            (result) => {
                if (result) {
                    console.log('Place Details:', result);
                }
            },
            (err) => console.error(err)
        );
    }
}

API

地点

initialize(apiKey)

属性	默认值	描述
apiKey	undefined	Google 地点 API 密钥

示例

Place.initialize('GOOGLE_PLACE_API_KEY');

自动完成

show(options)

属性	默认值	描述
字段	undefined	定义要检索的字段类型。默认情况下将检索所有类型。
ios	undefined	iOS 相关选项
ios.appearance	undefined	iOS 外观选项。有关更多信息，请参阅文档。
ios.appearance.primaryTextColor	undefined	主要文本颜色
ios.appearance.primaryTextHighlightColor	undefined	主要文本高亮颜色
ios.appearance.secondaryTextColor	undefined	次要文本颜色
ios.appearance.tableCellBackgroundColor	undefined	表格单元格背景颜色
ios.appearance.tableCellSeparatorColor	undefined	表格单元格分隔线颜色
ios.appearance.tintColor	undefined	色调颜色
locationBias.southwest	undefined	西南边界
locationBias.northeast	undefined	东北边界

字段	数据类型	描述
address	string	地址
id	string	Id
lat_lng	object	坐标
name	string	地点名称
phone_number	string	电话号码
price_level	number	定价
rating	number	评分
user_ratings_total	number	总评分
utc_offset_minutes	number	UTC 偏移量（分钟）
viewport	object	视口
website_uri	string	URL

示例

PlaceAutocomplete.show({ fields: ['name'] })
.then(
    (result) => {
        if (result) {
            console.log('Place Details:', result);
        }
    },
    (err) => console.error(err)
);

许可证

MIT