个人中心
gpt4 book ai didi

javascript - Angular Factory 没有被调用

转载 作者：太空宇宙 更新时间：2023-11-04 00:23:25 25 4
gpt4 key购买 nike

我正在关注this使用 Google map 构建 MEAN 应用程序的教程。我遇到的问题是 map 根本没有显示。浏览器控制台中没有错误，当我尝试使用 Node 检查器进行调试时，我注意到我可以在包含 Angular 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 并将 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)
})

但正如前面提到的，页面保持空白并且没有错误。我几个小时以来一直在寻求解决这个问题，也许这里有人知道我应该朝哪个方向解决这个问题？

干杯

最佳答案

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

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>

关于javascript - Angular Factory 没有被调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43732901/

25 4 0
文章推荐： jquery - 如何使用jquery ajax从node.js文件中检索数据
文章推荐： c - 按位 AND 运算符在 C 和 C++ 中是可传递的吗？
文章推荐： c - Switch - 如何检查空格？
文章推荐： html - 100% 宽度用于输入或在表格中选择
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com