Question

我正在关注使用Google地图构建MEAN应用的this教程。我有问题，根本没有显示地图。浏览器控制台中没有错误，当我尝试使用node-inspector进行调试时，我注意到我可以在包含Angular Factory的文件中设置断点，这些断点不会被触发。所以我想知道它是否被调用。

factory.js

angular.module('gservice', []).factory('gservice', function($http){

    var googleMapService = {};
    var stationLocations = [];
    var selLat = 40.7831;
    var selLong = -73.9712;

    googleMapService.refresh = function(latitude, longitude){

        stationLocations = [];

        $http.get('/stations').then(function(response){
            stationLocations = convertToMapPoints(reponse.data);
            initialize(latitude, longitude);
        }).error(function(){console.log("error")});
    };

    var convertToMapPoints = function(reponse){
        var stationLocations = [];

        for(var i=0; i < reponse.length; i++) {
            console.log(i);
            console.log("hi");
            var station = reponse[i];

            var stationDetails = 
                '<p>Station Name: ' + station.StationName +
                '</p>';

            // Convert retrieved JSON to GMaps LatLong Format
            stationLocations.push({
                latlong: new google.maps.LatLng(station.Latitude, station.Longitude),
                message: new google.maps.InfoWindow({
                    content: stationDetails,
                    maxWidth: 300
                }),
                stationName: station.StationName
            });

        }
        return stationLocations;
    };

    var initialize = function(latitude, longitude) {
        var startLatLong = {lat: 40.7831, lng: -73.9712};

        if (!map){
            console.log('no map yet');
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: startLatLong
            });
        }

        locations.forEach(function(n, i){
            var marker = new google.maps.Marker({
                position: n.latlong,
                map: map,
                title: "Citigraph",
                icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png" 
            });

            google.maps.event.addListener(marker, 'click', function(e){
                currentMarker = n,
                n.message.open(map, marker);
            });
        });

        var initLocation = new google.maps.LatLng(latitude, longitude);
        var marker = new google.maps.Marker({
            position: initLocation,
            animation: google.maps.Animation.Bounce,
            map: map,
            icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
        });
        lastMarker = marker;
    };

    google.maps.event.addDomListener(window, 'load',
        googleMapService.refresh(selLat, selLong));

    return googleMapService;
});

这应该得到div map并在index.html中放置一张地图：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="style.css"/>
    <!-- Google Maps API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=true"></script>
    <!-- JS Source -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/node_modules/angular/angular.js"></script>
    <!-- Angular Files -->
    <script src="./app.js"></script>
    <script src="./factory.js"></script>

  </head>
  <body>

  <div class="container">
    <div id="map"></div>
    </div>
  </body>
</html>

app.js就是以下内容：

var app = angular.module('citigraph', ['gservice']);

我的server.js：

var express         = require('express');
var mongoose        = require('mongoose');
var port            = process.env.PORT || 3000;
var bodyParser      = require('body-parser');
var morgan          = require('morgan');
var methodOverride  = require('method-override');
var app             = express();

mongoose.connect('mongodb://127.0.0.1:27017/test2');

var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
    console.log('connected');
});

// Logging & Parsing
app.use(express.static(__dirname));
app.use(morgan('dev'));                                         
app.use(bodyParser.json());                                     
app.use(bodyParser.urlencoded({extended: true}));              
app.use(bodyParser.text());                                    
app.use(bodyParser.json({ type: 'application/vnd.api+json'}));
app.use(methodOverride());

require('./routes.js')(app);

app.listen(port, function() {
    console.log('Server listening on', 3000)
})

但如上所述，页面保持空白且没有错误。我一直在寻找修复它几个小时，也许这里有人知道我应该在什么方向解决这个问题？

干杯

Answer 1

您不应该首先为服务和模块使用相同的名称。尝试将其更改为其他名称。

angular.module('gservice', []).factory('Myervice', function($http){

然后

var app = angular.module('citigraph', ['gservice']);

也应该是，

<script src="./factory.js"></script>
<script src="./app.js"></script>

您还需要在html中包含ng-app。

  <div ng-app="citigraph" class="container">
    <div id="map"></div>
    </div>
  </body>

Angular Factory没有被调用

1 个答案: