Question

我偶然发现Google Maps for AngularJS并认为这可能是在移动跨设备应用上使用谷歌地图的好方法（我使用的是Ionic Framework）。我想从服务器加载位置，过滤它们，使用自定义标记和信息气泡，使用导航步骤创建路线等。

我想知道为什么我需要这个：

<script src='/path/to/lodash.underscore[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>

因为我已经能够完成我打算只使用Google Maps API的东西（不过Ionic或Angular）。

实际上，使用Google Maps for AngularJS方法，我遇到了一些问题，例如，这不起作用：

$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

返回Uncaught TypeError: undefined is not a function

这也不起作用：

$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});

返回：Uncaught TypeError: Cannot read property 'refresh' of undefined

这是来自控制器的代码：

.controller('MapCtrl', function($scope) {

  $scope.map = {
    center: {
        latitude: 45,
        longitude: -73
    },
    zoom: 8
    };

  $scope.centerMap = function () {
    if (!$scope.map) {
      return;
    }

    navigator.geolocation.getCurrentPosition(function (pos) {
      //console.log('Got pos', pos.coords.latitude, ", ", pos.coords.longitude); // ok
      //$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));     // does not work
      //$scope.map.control.refresh({latitude: pos.coords.latitude, longitude: pos.coords.longitude});   // does not work

    }, function (error) {
      alert('Unable to get location: ' + error.message);
    });
  };
})

在视图中：

<google-map
    center="map.center"
    zoom="map.zoom"
    draggable="true"
    style="display:block; width: 100%; height:100%;">
</google-map>

我知道明显的，哲学的答案是：＆＃34;如果你不需要它，不要使用它＆＃34;但我觉得我在这里缺少一些基本的东西，我想对这个问题有更深入的了解。

任何帮助将不胜感激。

PS：

我对Angular（以及它依赖的许多概念）都很陌生，所以这可能是我混淆的主要原因。如果这篇文章有任何问题（太模糊，或者我太懒），我很乐意收到通知。

ps 2：

我用它来工作：

$ scope.map.center.latitude = 45; $ scope.map.center.longitude = -74;

我不明白为什么以下示例（例如AngularGoogleMaps API docs）对我不起作用：

$scope.map.control.refresh({latitude: 32.779680, longitude: -79.935493});

实际上$scope.map.control会在我的代码中返回undefined。

ps 3：

我实际上在这里有两个问题：一个是关于地图的中心，另一个是关于使用AngularJS Google Maps API的模糊问题，我有很好的答案 - 所以，对不起这个烂摊子，我是删除此主题。

Answer 1

嗯，AngularJS的Google地图的“代码”位于第二个脚本标记中。这个脚本依赖于第一个脚本（lodash）的一些功能，这就是为什么后者首先被加载的原因。

AngularJS代码包装了Google Maps API。所以，是的，您可以单独使用Google API，但是您不会拥有Angular API提供的一些更简单的声明性标记。例如，

<google-map center="{latitude:80.001, longitude:125.43}">   
</google-map>

实际上会生成一张地图并显示它。此（HTML指令）的HTML标记在第二个脚本文件中定义。

如果你没有使用它，你仍然可以根据Google API编写生成地图所需的javascript代码：

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

只有两种不同的编码风格。使用Angular方法，您可以根据您的使用情况在HTML中自行定义功能。

关于您看到的错误，您的应用似乎找不到上面的脚本文件。您正在用实际路径替换上面指出的路径，对吗？

Answer 2

我长时间使用这个模块，并将其包装在我自己的指令中。你可能想要使用这个模块的原因是因为加载谷歌地图当然是异步的，你终于在你能够使用谷歌地图API之前处理所有的承诺，所以这个模块包装了这个和一个地图中很多其他用法。它还公开了您可能想要使用的指令。

无法使用AngularJS Google Map /使用AngularJS Google Maps API

2 个答案: