简介
angular-google-maps-native 是一个 AngularJS 模块，用于在 Google 地图上显示标记，面和折线等。
本文将介绍如何安装和使用这个 npm 包，并提供一些示例代码。
安装
要使用 angular-google-maps-native，您需要先安装 AngularJS。
一旦您有了 AngularJS，只需要在你的项目文件中执行以下命令：
npm install angular-google-maps-native
您还需要在 <script> 标记中包含以下脚本：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请替换 YOUR_API_KEY 为您自己的 Google Maps API 密钥。
使用
首先，在您的 AngularJS 应用程序中注入 'angular-google-maps-native' 模块：
angular.module('myApp', ['angular-google-maps-native']);接下来，定义一个地图对象，并在<google-map>指令中使用它：
-- -------------------- ---- -------
----------------------- -------------------------------
--------------------- ---------------- -
---------- - -
------- -
--------- ---
---------- ---
--
----- -
--
---<div ng-controller="MyCtrl"> <google-map center="map.center" zoom="map.zoom"></google-map> </div>
这将在页面上显示一个 Google 地图。
添加标记
为了在地图上添加标记，您需要使用 markers属性：
$scope.markers = [{
id: 0,
coordinates: {
latitude: 45,
longitude: -73
},
title: 'Marker 1'
}];<div ng-controller="MyCtrl"> <google-map center="map.center" zoom="map.zoom" markers="markers"></google-map> </div>
这将在地图上显示一个标记，并在单击时呈现带有标记名称的信息窗口。
添加面
为了在地图上添加面，您需要使用 polygons属性：
-- -------------------- ---- -------
--------------- - --
--- --
----- --
--------- ---
---------- ---
-- -
--------- ---
---------- ---
-- -
--------- ---
---------- ---
-- -
--------- ---
---------- ---
---
------- -
------ ----------
------- -
--
----- -
------ ----------
-------- ----
-
---<div ng-controller="MyCtrl"> <google-map center="map.center" zoom="map.zoom" polygons="polygons"></google-map> </div>
这将在地图上显示一个面。
添加折线
为了在地图上添加折线，您需要使用 polylines属性：
-- -------------------- ---- -------
---------------- - --
--- --
----- --
--------- ---
---------- ---
-- -
--------- ---
---------- ---
-- -
--------- ---
---------- ---
---
------- -
------ ----------
------- -
-
---<div ng-controller="MyCtrl"> <google-map center="map.center" zoom="map.zoom" polylines="polylines"></google-map> </div>
这将在地图上显示一个折线。
结论
angular-google-maps-native 是一个出色的 AngularJS 模块，可帮助您轻松地通过 Google 地图显示标记、面和折线等。希望这篇文章能够帮助您开始使用该模块。
完整的示例代码可在我的 Github 仓库中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53c46