Question

大家好，我目前正在开展一个基于Cordova的项目，我想在网站上加载一个单独的链接（这是谷歌地图的谷歌地图api）。但不知何故，它不会加载地图。首先，我认为他不会进入我的函数初始化，但在发现警报后我发现它确实如此。所以我也向JS发出警告，谷歌地图api的加载如下：

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

但是当我在手机上运行代码作为cordova app时，它不会显示警告。

如果需要，这是完整的代码：

<!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键，因此它不会公开。有没有人知道为什么它不加载我提到的脚本？

Answer 1

您的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>

SRC =＆＃34;＆＃34;不会加载在cordova

1 个答案: