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

-1

我有一個問題：我正在使用angular.js並已實現路由。這也適用於我，並在模板中顯示html代碼。但是，我有以下問題：我的模板看起來是這樣的：內聯javascript沒有在角度路由模板中執行

<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頁面中實現它，它會工作。

在此先感謝

來源

2017-02-08 coderprt

你使用jquery，檢查jquery加載，在做任何事情之前 – MMK

我已經加載jquery，讓控制檯輸出執行但不是谷歌map（api）... – coderprt

$（document）.ready（function（）{}在forloop裏面爲什麼它應該在console.log上面（「Hi」）; – MMK

解決它：

剛剛實施的jQuery和Gmaps API本身進入主頁。我認爲這足以鏈接谷歌地圖源的JavaScript模板頁上的JavaScript部分

來源

2017-02-08 13:53:02 coderprt

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

回答

相關問題