javascript - 将 Google map 添加到 AngularJS 和 Ionic 应用程序

Question

我正在尝试添加一个 Google map 应用程序，为用户提供从他/她当前位置到 map 上特定固定静态点的方向。到目前为止我已经创建了一个 Controller 和相关的 HTML。然而，由于某种原因，当我测试这个时，我没有得到 map ，而是控制台中出现错误“”

这是我的 Controller :

'use strict';
angular.module('main')
  .controller('LocationCtrl', function($scope, $ionicLoading, $compile) {
    function initialize() {
      google.maps.event.addDomListener(window, 'load');

      var myLatlng = new google.maps.LatLng(43.07493, -89.381388);

      var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

      //Marker + infowindow + angularjs compiled ng-click
      var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
      var compiled = $compile(contentString)($scope);

      var infowindow = new google.maps.InfoWindow({
        content: compiled[0]
      });

      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Uluru (Ayers Rock)'
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });

      $scope.map = map;
    }

    function loadScript(src) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      document.getElementsByTagName("head")[0].appendChild(script);
      script.src = src;
    }

    loadScript('http://www.google.com.mt/jsapi');
    loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');



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

      $scope.loading = $ionicLoading.show({
        content: 'Getting location',
        showBackdrop: false
      });

      navigator.geolocation.getCurrentPosition(function(pos) {
        $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        $scope.loading.hide();
      }, function(error) {
        alert('Unable to get location: ' + error.message);
      });
    };

    $scope.clickTest = function() {
      alert('Example of infowindow with ng-click')
    };

  });

<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-pane>
  <ion-header-bar class="bar-dark">
    <button ui-sref="main" class="button button-icon icon ion-navicon"></button>
    <h1 class="title">Directions</h1>
  </ion-header-bar>
  <ion-content>

    <div id="map" data-tap-disabled="true"></div>

  </ion-content>

  <ion-footer-bar class="bar-dark">
    <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
  </ion-footer-bar>
</ion-pane>

有人可以告诉我我做错了什么吗？另外，有人可以给我一些提示，告诉我如何在用户单击页脚中的“查找我”链接时向用户提供到达此静态点的方向吗？ (沿着这些思路，但终点是固定的，起点是用户单击“查找我”按钮时的位置 - https://developers.google.com/maps/documentation/javascript/examples/directions-panel)

我是 AngularJS 新手，不确定我的代码是否正确。另外，我没有使用 jQuery 作为依赖项。

Answer 1

尝试与 Angular Google map 集成 http://angular-ui.github.io/angular-google-maps/#!/

它更容易使用并且有很好的文档。