前言
作为前端工程师，在开发过程中遇到不同的问题需要使用不同的工具进行解决。其中，使用 npm 包是我们经常采用的一种方式。本文介绍如何使用 npm 包 angular2-yandex-maps 来使用 Yandex 地图。
安装
使用 npm 安装 angular2-yandex-maps：
npm install angular2-yandex-maps --save
使用
引入模块
在需要使用地图的模块中引入 Yandex 地图模块：
import { YandexMapsModule } from 'angular2-yandex-maps';
@NgModule({
imports: [
YandexMapsModule.forRoot('您的 API key'),
],
})
export class AppModule {}在组件中使用地图
在需要使用 Yandex 地图的组件中，使用 Yandex 地图组件：
<yandex-map [center]="[55.76, 37.64]" [zoom]="12">
<ym-marker [geometry]="[55.76, 37.64]" [properties]="{hintContent: 'Москва!'}"></ym-marker>
</yandex-map>参数说明
center：可选。地图中心坐标，默认为 [55.76, 37.64]。zoom：可选。地图缩放级别，默认为 10。
GeoObjects
可以在 Yandex 地图上添加不同类型的对象，如标记、线、面等等。通过 GeoObjects 可以实现此功能。
添加 Marker
在 Yandex 地图上添加 Marker：
<yandex-map [center]="[55.76, 37.64]" [zoom]="12">
<ym-marker [geometry]="[55.76, 37.64]" [properties]="{hintContent: 'Москва!'}"></ym-marker>
</yandex-map>添加 Polyline
在 Yandex 地图上添加 Polyline：
<yandex-map [center]="[55.76, 37.64]" [zoom]="12">
<ym-polyline [geometry]="[[55.76, 37.64], [55.74, 37.62]]" [properties]="{hintContent: 'Москва!'}"></ym-polyline>
</yandex-map>添加 Polygon
在 Yandex 地图上添加 Polygon：
<yandex-map [center]="[55.76, 37.64]" [zoom]="12">
<ym-polygon [geometry]="[[[55.76, 37.64], [55.78, 37.66], [55.74, 37.68]]]" [properties]="{hintContent: 'Москва!'}"></ym-polygon>
</yandex-map>示例代码
此处为一个简单的示例，演示了如何在 Angular 应用中使用 Yandex 地图：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------- ----------------- ------- ------------
---------- ------------------- ------- --------------------------- ------------------------
---------------
--
------ ----- ------------ --结论
本文介绍了如何使用 npm 包 angular2-yandex-maps 来使用 Yandex 地图。通过学习本文，读者可以学习到如何在 Angular 应用中使用 Yandex 地图，并根据自身需要在地图中添加不同类型的对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d381e8991b448e0200