Question

我正在尝试将一个简单的Google Maps项目（从他们网站上的示例完成）迁移到AngularJS项目。让我先说一下我是AngularJS和web dev的新手，所以请善待:)我在https://github.com/eroth/angular-web-app（下面的主要文件）中有一个简单的项目，我从最初的提交开始使用谷歌地图教程尝试将其转换为AngularJS应用程序，但未能使其工作，虽然我已经验证我的MapController.js文件中的$scope.init()函数是从我的调用map.html文件。

我的问题有两个方面：我的代码出现了问题，或者我需要这样的东西（看起来非常好）：http://nlaplante.github.io/angular-google-maps/？我正在努力将其合并到我的另一个分支上的项目中，但我想弄清楚它是否是我现有代码的问题，或者我是否需要类似这个库的东西来使它与AngularJS一起工作。如果是后者，为什么？如果我正在制作一些非常简单的错误，请事先道歉;就像我说的那样，我对这一切都很陌生，虽然我确实通过了一些AngularJS教程，看起来很棒。

这是我的map.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <!-- INCLUDE REQUIRED THIRD PARTY LIBRARY JAVASCRIPT AND CSS -->
    <script type="text/javascript" src="js/angular.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">

    <!-- INCLUDE APPLICATION SPECIFIC CSS AND JAVASCRIPT -->
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=true&language=en">
    </script>
    <script type="text/javascript" src="js/web-app/app.js"></script>
    <script type="text/javascript" src="js/web-app/controllers/mainController.js"></script>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
      <div id="map-canvas"/>
    </div>
  </body>
</html>

这是我的MapController.js文件：

app.controller("mainController", function($scope, $http){
$scope.initialLocation;
$scope.siberia = new google.maps.LatLng(60, 105);
$scope.newyork = new google.maps.LatLng(40.7463, -73.9913);
$scope.browserSupportFlag =  new Boolean();
$scope.map;
$scope.retina = window.devicePixelRatio > 1;

$scope.init = function () {
    var mapOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    console.log('In main init');

    //first test——map uses hard-coded location, next will get user's location and pull deals
    $scope.map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);

    // Try W3C Geolocation (Preferred)
    if (navigator.geolocation) {
      $scope.browserSupportFlag = true;
      navigator.geolocation.getCurrentPosition(function(position) {
        $scope.initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var currentLat = position.coords.latitude;
        var currentLon = position.coords.longitude;
        $scope.map.setCenter($scope.initialLocation);
        // performApiCall(currentLat, currentLon);

        //definite custom map pin for user location & plot it on map
        var pinColor = "5ea9ff";
        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + pinColor + "|0|_|k",
        new google.maps.Size(25, 60),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 24));
        var marker = new google.maps.Marker({
            position: $scope.initialLocation,
            map: $scope.map,
            icon: pinImage,
        });
      }, function() {
        handleNoGeolocation($scope.browserSupportFlag);
      });
    }

    // Browser doesn't support Geolocation
    else {
      $scope.browserSupportFlag = false;
      handleNoGeolocation($scope.browserSupportFlag);
    }

    function handleNoGeolocation(errorFlag) {
      if (errorFlag == true) {
        alert("Geolocation service failed.");
        $scope.initialLocation = newyork;
      } else {
        alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
        $scope.initialLocation = siberia;
      }
      map.setCenter($scope.initialLocation);
    }
};

google.maps.event.addDomListener(window, 'load', $scope.init);
});

提前感谢您的帮助！

Answer 1

您的代码存在一些问题。首先，您已经通过init()在DOM中使用mainController调用范围的ng-init函数。

<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">

这意味着您不需要加载窗口的侦听器来调用$scope.init - 因为这将运行该函数两次，然后将地图初始化两次。删除监听器。

其次，有一些实例调用变量实际上是$ scope对象的一部分（newyork Ln 57，塞尔维亚Ln 60和映射Ln 62） - 因此会抛出一个未定义的错误。

最后，您必须在CSS中为地图的div容器设置一个高度才能真正看到地图。

#map-canvas { height : 200px; }
/* if you want to set the height as a percentage of the parent div, remember to give a height to the parent div as well */

关于你问题的第二部分，我肯定会考虑使用已经构建的内容。我没有使用你链接的库，但如果你说它非常好 - 为什么要重新发明轮子？

尝试使用简单的Google Maps示例来使用AngularJS

1 个答案: