npm 包 angular-google-maps-native 使用教程

简介

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>指令中使用它：

angular.module('myApp', ['angular-google-maps-native'])
  .controller('MyCtrl', function($scope) {
    $scope.map = {
      center: {
        latitude: 45,
        longitude: -73
      },
      zoom: 8
    };
  });

<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属性：

$scope.polygons = [{
  id: 1,
  path: [{
    latitude: 45,
    longitude: -73
  }, {
    latitude: 46,
    longitude: -74
  }, {
    latitude: 44,
    longitude: -75
  }, {
    latitude: 45,
    longitude: -73
  }],
  stroke: {
    color: '#6060FB',
    weight: 3
  },
  fill: {
    color: '#FF0000',
    opacity: 0.35
  }
}];

<div ng-controller="MyCtrl">
  <google-map center="map.center" zoom="map.zoom" polygons="polygons"></google-map>
</div>

这将在地图上显示一个面。

添加折线

为了在地图上添加折线，您需要使用 polylines属性：

$scope.polylines = [{
  id: 2,
  path: [{
    latitude: 45,
    longitude: -73
  }, {
    latitude: 46,
    longitude: -74
  }, {
    latitude: 44,
    longitude: -75
  }],
  stroke: {
    color: '#6060FB',
    weight: 3
  }
}];

<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