[英]inline javascript not being executed in angular routing template
我有一个问题:我正在使用 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 页面中实现它,它就可以工作。
提前致谢
解决了:
刚刚在主页上实现了 jquery 和 Gmaps api 本身。 我认为在模板页面的 javascript 部分链接谷歌地图源就足够了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.