內聯javascript未在角度路由模板中執行

Question

我有一個問題：我正在使用 angular.js 並且已經實現了路由。 這對我來說也很有效，並在模板中顯示了 html 代碼。 但我有以下問題：我的模板看起來像這樣：

<div id="map_canvas"  style="width:95%; height:800px; margin-top:5%; "></div>
        <div id="legend"><h3>Legend</h3></div>    
<script type="text/javascript">
            console.log('Hi');
            function initialize() {

                var mapOptions = {
                    zoom: 13,
                    center: new google.maps.LatLng(48.209500, 16.370691),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



                //Markers


                var lat_cat0;
                var long_cat0;
                var markerContent ="";
                var iconNames = ["NotAvailable", "VeryBad", "Bad", "Medium", "Good", "VeryGood"];
                for (i = 0; i < 6; i++) {
                    $(document).ready(function () {

                        $.getJSON("../../../Data/JSONs/randomdata_cat"+i+".json", function (result) {
                            $.each(result, function (i, field) {
                                markerContent = "Date: " + field.Timestamp + " - Downstream: " + field.Upstream.toFixed(2) + " Mbit/s - Upstream: " + field.Downstream.toFixed(2) + " Mbit/s";
                                var infowindow = new google.maps.InfoWindow({
                                    content: markerContent
                                });

                                var marker = new google.maps.Marker({
                                    position: new google.maps.LatLng(field.Long, field.Lat),
                                    animation: google.maps.Animation.Bounce,
                                    map: map,
                                    icon: 'images/Speed_'+iconNames[i]+'.png'
                                });
                                marker.addListener('click', function () {
                                    infowindow.open(map, marker);
                                });


                            });
                        });

                    });
                }


                //Legend

                var icons = {
                    notAvailable: {
                        name: 'notAvailable',
                        icon: 'images/Speed_NotAvailable.png'
                    },
                    verybad: {
                        name: 'verybad',
                        icon: 'images/Speed_VeryBad.png'
                    },
                    bad: {
                        name: 'bad',
                        icon: 'images/Speed_Bad.png'
                    },
                    medium: {
                        name: 'medium',
                        icon: 'images/Speed_Medium.png'
                    },
                    good: {
                        name: 'good',
                        icon: 'images/Speed_Good.png'
                    },
                    verygood: {
                        name: 'verygood',
                        icon: 'images/Speed_VeryGood.png'
                    }
                };


                var legend = document.getElementById('legend');
                for (var key in icons) {
                    var type = icons[key];
                    var name = type.name;
                    var icon = type.icon;
                    var div = document.createElement('div');
                    div.innerHTML = '<img src="' + icon + '"> ' + name;
                    legend.appendChild(div);
                }



                map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);


            }

            function loadScript() {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js?key=fds&sensor=true&callback=initialize";
                document.body.appendChild(script);

            }



            window.onload = loadScript;

        </script>

所以我只能看到兩個 div 而不能看到應該創建的地圖以及控制台輸出。 是的，如果我在“靜態”html 頁面中實現它，它就可以工作。

提前致謝

Answer 1

解決了：

剛剛在主頁上實現了 jquery 和 Gmaps api 本身。 我認為在模板頁面的 javascript 部分鏈接谷歌地圖源就足夠了