将 Google 地图添加到 AngularJS & Ionic App

Question

我正在尝试添加一个 Google 地图应用程序，以便为用户提供从 his/her 当前位置到地图上特定固定静态点的方向。到目前为止，我已经创建了一个控制器和相关的 HTML。但是，出于某种原因，当我对此进行测试时，我没有得到地图，而是控制台中出现错误“”

这是我的控制器：

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

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

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

Answer 1

initialize 函数未在全局上下文中定义。

设置 $window.initialize = initialize 对我有用

还添加了一些 css，但我猜你已经有了它们

工作fiddle

希望这对您有所帮助

Answer 2

将 google.maps.event.addDomListener(window, 'load', initialize); 替换为 ionic.Platform.ready(initialize);。类似.

Answer 3

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

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

将 Google 地图添加到 AngularJS & Ionic App

Adding Google Maps to AngularJS & Ionic App

javascript

google-maps

google-maps-api-3

angularjs

ionic-framework