在 gulp 项目中使用 ngMap - 构建失败 - 未定义获取 'google'

Question

我已经使用 Yeoman 设置了一个 angular 项目，并使用 ngmap 在页面中嵌入了一个 google 地图，使用给定的地址将其居中。我正在使用 google 地理编码服务向地图添加标记，以便在地图初始化后获取地址的 latitude/longitude。

var vm = this;
vm.address = '1600 Pennsylvania Ave NW, Washington, DC 20500, United States';
NgMap.getMap().then(function() {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: vm.address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
    vm.markerPosition = '[' + results[0].geometry.location.lat() + ', ' + results[0].geometry.location.lng() + ']';
    } else {
    console.log("Unable to retrive details for address: " + address);
    }
  });
});

它工作正常，我在这里有一个 plunkr 运行ning - https://plnkr.co/Ex91VGqdFmL9FP78uzU0?p=preview - 但是当我运行使用 gulp build 构建时我得到这个错误，当我运行单元测试时也是如此：

'google' is not defined

我需要注入或模拟什么，以便对 google.maps.Geocoder 的调用不会失败？

根据要求，这是构建

中的 index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <base href="/">
    <meta charset="utf-8">
    <title translate>title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="images/icon.png">
    <link rel="stylesheet" href="styles/vendor-d41d8cd98f.css">
    <link rel="stylesheet" href="styles/app-2dd2bcbbbd.css">
  <script src="https://maps.google.com/maps/api/js"></script>
  </head>
  <body>
        <main ui-view></main>
  </body>
  <script src="scripts/vendor-83b6c91f4a.js"></script>
   <script src="scripts/app-41321c4301.js"></script>
</html>

Answer 1

通读了一些 ngMap 的示例，发现 marker 指令可以将地址作为参数，它会自动将地址转换为 lat/lon 值。所以解决方案是删除所有 google.maps.Geocoder 和 html.

中的这个

<marker position="{{myMapCtrl.address}}" title="Marker"></marker>

并在尝试使用库之前学习阅读所有文档

在 gulp 项目中使用 ngMap - 构建失败 - 未定义获取 'google'

Using ngMap in gulp project - build failing - getting 'google' is not defined

google-maps-api-3

angularjs

ng-map