无法居中 AngularJS Google Map / AngularJS Google Maps API 的使用 [关闭]

Question

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

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

<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>

我知道一个显而易见的哲学答案是：“如果你不需要它，就不要使用它”，但我觉得我在这里遗漏了一些基本的东西，我想对这个主题有更深入的了解。

任何帮助将不胜感激。

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：

我实际上在这里有 2 个问题：一个是关于使地图居中的问题，另一个是关于使用 AngularJS Google Maps API 的模糊问题，对此我有很好的答案 - 所以，很抱歉造成混乱，我要删除这个线程。

Answer 1

嗯，AngularJS 的 Google 地图的“代码”位于第二个脚本标签中。该脚本依赖于第一个脚本 (lodash) 的某些功能，这就是为什么要先加载后者。

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

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

实际上会生成一个地图并显示它。这个（角度指令）的 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 之前你要处理所有的承诺，所以这个模块包装了这个和很多地图中的其他用途。它还公开了您可能想要使用的指令。