2015-02-23 17 views
-3

你好家伙我目前正在基于科尔多瓦的项目,我想从网上加载seperat链接(这是谷歌地图API与谷歌的地方)。但不知何故,它不会加载地图。首先,我认为他不会进入我的函数初始化,但在插入警报后,我发现它已经做到了。所以我也把警报到在谷歌地图API载入这样的JS:src =“”将不会加载在科尔多瓦

<script type="text/javascript" 
    alert("hi"); 
    src="http://maps.googleapis.com/maps/api/js?key=_______=false&libraries=places"> 
</script> 

,但它不会显示警报时,我作为科尔多瓦的应用程序在手机上运行的代码。

这里是如果需要的话全码:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta charset="utf-8"> 
    <title>sparendfahren.at</title> 
    </head> 

    <!-- jQuery Version 1.11.0 --> 
    <script type="application/javascript" src="../js/jquery-1.11.0.js"></script> 

    <!-- Google Maps API --> 
     <script type="text/javascript" 
     alert("hi"); 
     src="http://maps.googleapis.com/maps/api/js?key=______4&sensor=false&libraries=places"> 
    </script> 

    <!-- Style CSS --> 
    <link href="../css/style.css" rel="stylesheet"> 

    <script> 


var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

function initialize() { 
//alert("initialize"); 
var styles = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#76aee3"},{"saturation":38},{"lightness":-11},{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#8dc749"},{"saturation":-47},{"lightness":-17},{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"hue":"#c6e3a4"},{"saturation":17},{"lightness":-2},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#cccccc"},{"saturation":-100},{"lightness":13},{"visibility":"on"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"hue":"#5f5855"},{"saturation":6},{"lightness":-31},{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"all","stylers":[]}]; 
var styledMap = new google.maps.StyledMapType(styles, {name: ""}); 

    directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: { 
     strokeColor: "red" 
    }}); 
    var mapOptions = { 
      center: new google.maps.LatLng(47.6826215,13.0984208,17), 
      zoom: 15, 
      disableDefaultUI: true, 
      mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
      } 
     }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     map.mapTypes.set('map_style', styledMap); 
     map.setMapTypeId('map_style'); 
     map.setOptions({styles: styles}); 

    var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(47.67052,13.114028), 
      new google.maps.LatLng(47.6910273,13.1153865)); 

     var options = { 
      bounds: defaultBounds, 
     }; 

     var start_input = document.getElementById('start'); 
     start_autocomplete = new google.maps.places.Autocomplete(start_input, options); 
    var end_input = document.getElementById('end'); 
     end_autocomplete = new google.maps.places.Autocomplete(end_input, options); 

    directionsDisplay.setMap(map); 
} 

function calcRoute() { 
    var start = document.getElementById('start').value; 
    var end = document.getElementById('end').value; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 


<body> 
    <div id="all"> 
    <div id="sidebar"> 
     <ul class="sidebar-nav"> 
     <li class="sidebar-title"> 
      sparendfahren.at 
     </li> 
     <li> 
      <a href="index.html">Karte</a> 
     </li> 
     <li> 
      <a href="profil.html">Profil</a> 
     </li> 
     <li> 
      <a href="fahrtErstellen.html">Fahrt Erstellen</a> 
     </li> 
     <li> 
      <a href="fahrtSuchen.html">Fahrt Suchen</a> 
     </li> 
     <li> 
      <a href="meineFahrten.html">Meine Fahrten</a> 
     </li> 
     <li> 
      <a href="einstellungen.html">Einstellungen</a> 
     </li> 
     <li> 
      <a href="faq.html">FAQ</a> 
     </li> 
     <li> 
      <a href="#logout">Abmelden</a> 
     </li> 
     </ul> 
    </div> 

    <!-- HEADER (BURGERBUTTON) --> 
    <div id="header"> 
     <a id="sidebar-toggle"> 
     <img src="../images/burger.png" href="#sidebar-toggle"> 
     </a> 
    </div> 

    <!-- CONTENT (MAP, SEARCHBARS) --> 
    <div id="content"> 
     <div id="panel"> 
     <input id="start" type="text" onchange="calcRoute();" placeholder="Startpunkt eingeben"> 
     <input id="end" type="text" align="right" onchange="calcRoute();" placeholder="Endpunkt eingeben"> 
     </div> 
     <div id="map-canvas"></div> 
    </div> 
    </div> 

    <!-- Sidebar Toggle Script --> 
    <script> 
    $("#sidebar-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#all").toggleClass("toggled"); 
    }); 
    </script> 

</body> 

</html> 

我在这段代码中唯一改变的是,我删除了谷歌地图API密钥,因此它不会得到公众。有没有人有一个想法,为什么它不加载我提到的脚本?

回答

0

您的script标记无效。 alert()应该被称为标签script之间,而不是在开放标签之中:

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=______4&sensor=false&libraries=places"> 
    alert("hi"); 
</script> 

但是,这是行不通的,反正。修复了该错误并加载了src=脚本之后,您可以使用the inner Javascript won't be called。如果你真的想要外部和内联脚本运行,你会想说:

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=______4&sensor=false&libraries=places"> 
</script> 

<script type="text/javascript"> 
    alert("hi"); 
</script> 
+0

感谢您的快速回复!但我只是想测试警报,如果脚本被调用,我不认为它是。因为我的谷歌地图不会显示,即使我修复脚本标记的问题。 – FabianE 2015-02-23 21:17:08