javascript - 添加外部脚本时不起作用

Question

我在加载我的外部 js 文件时遇到问题。当我添加外部 js 文件时它不起作用，但当我将它放入 html 文件时它起作用。但我需要它是外部的。请帮助我

这是我的js、css和html代码

 var map, places, iw;
 var markers = [];
 var searchTimeout;
 var centerMarker;
 var autocomplete;
 var hostnameRegexp = new RegExp('^https?://.+?/');

 function initialize() {
   var myLatlng = new google.maps.LatLng(37.786906, -122.410156);
   var myOptions = {
     zoom: 17,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
   places = new google.maps.places.PlacesService(map);
   google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);

   document.getElementById('keyword').onkeyup = function(e) {
     if (!e) var e = window.event;
     if (e.keyCode != 13) return;
     document.getElementById('keyword').blur();
     search(document.getElementById('keyword').value);
   }

   var typeSelect = document.getElementById('type');
   typeSelect.onchange = function() {
     search();
   };

   var rankBySelect = document.getElementById('rankBy');
   rankBySelect.onchange = function() {
     search();
   };

 }

 function tilesLoaded() {
   search();
   google.maps.event.clearListeners(map, 'tilesloaded');
   google.maps.event.addListener(map, 'zoom_changed', searchIfRankByProminence);
   google.maps.event.addListener(map, 'dragend', search);
 }

 function searchIfRankByProminence() {
   if (document.getElementById('rankBy').value == 'prominence') {
     search();
   }
 }

 function search() {
   clearResults();
   clearMarkers();

   if (searchTimeout) {
     window.clearTimeout(searchTimeout);
   }
   searchTimeout = window.setTimeout(reallyDoSearch, 500);
 }

 function reallyDoSearch() {
   var type = document.getElementById('type').value;
   var keyword = document.getElementById('keyword').value;
   var rankBy = document.getElementById('rankBy').value;

   var search = {};

   if (keyword) {
     search.keyword = keyword;
   }

   if (type != 'establishment') {
     search.types = [type];
   }

   if (rankBy == 'distance' && (search.types || search.keyword)) {
     search.rankBy = google.maps.places.RankBy.DISTANCE;
     search.location = map.getCenter();
     centerMarker = new google.maps.Marker({
       position: search.location,
       animation: google.maps.Animation.DROP,
       map: map
     });
   } else {
     search.bounds = map.getBounds();
   }

   places.search(search, function(results, status) {
     if (status == google.maps.places.PlacesServiceStatus.OK) {
       for (var i = 0; i < results.length; i++) {
         var icon = 'number_' + (i + 1) + '.png';
         markers.push(new google.maps.Marker({
           position: results[i].geometry.location,
           animation: google.maps.Animation.DROP,
           icon: icon
         }));
         google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
         window.setTimeout(dropMarker(i), i * 100);
         addResult(results[i], i);
       }
     }
   });
 }

 function clearMarkers() {
   for (var i = 0; i < markers.length; i++) {
     markers[i].setMap(null);
   }
   markers = [];
   if (centerMarker) {
     centerMarker.setMap(null);
   }
 }

 function dropMarker(i) {
   return function() {
     if (markers[i]) {
       markers[i].setMap(map);
     }
   }
 }

 function addResult(result, i) {
   var results = document.getElementById('results');
   var tr = document.createElement('tr');
   tr.style.backgroundColor = (i % 2 == 0 ? '#00FFFFFFF' : '#00FFFFFFF');
   tr.onclick = function() {
     google.maps.event.trigger(markers[i], 'click');
   };

   var iconTd = document.createElement('td');
   var nameTd = document.createElement('td');
   var icon = document.createElement('img');
   icon.src = 'number_' + (i + 1) + '.png';
   icon.setAttribute('class', 'placeIcon');
   icon.setAttribute('className', 'placeIcon');
   var name = document.createTextNode(result.name);
   iconTd.appendChild(icon);
   nameTd.appendChild(name);
   tr.appendChild(iconTd);
   tr.appendChild(nameTd);
   results.appendChild(tr);
 }

 function clearResults() {
   var results = document.getElementById('results');
   while (results.childNodes[0]) {
     results.removeChild(results.childNodes[0]);
   }
 }

 function getDetails(result, i) {
   return function() {
     places.getDetails({
       reference: result.reference
     }, showInfoWindow(i));
   }
 }

 function showInfoWindow(i) {
   return function(place, status) {
     if (iw) {
       iw.close();
       iw = null;
     }

     if (status == google.maps.places.PlacesServiceStatus.OK) {
       iw = new google.maps.InfoWindow({
         content: getIWContent(place)
       });
       iw.open(map, markers[i]);
     }
   }
 }

 function getIWContent(place) {
   var content = '';
   content += '<table>';
   content += '<tr class="iw_table_row">';
   content += '<td style="text-align: left"><img class="hotelIcon" src="' + place.icon + '"/></td>';
   content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b></td></tr>';
   content += '<tr class="iw_table_row"><td class="iw_attribute_name">Address:</td><td>' + place.vicinity + '</td></tr>';
   if (place.formatted_phone_number) {
     content += '<tr class="iw_table_row"><td class="iw_attribute_name">Telephone:</td><td>' + place.formatted_phone_number + '</td></tr>';
   }
   if (place.rating) {
     var ratingHtml = '';
     for (var i = 0; i < 5; i++) {
       if (place.rating < (i + 0.5)) {
         ratingHtml += '&#10025;';
       } else {
         ratingHtml += '&#10029;';
       }
     }
     content += '<tr class="iw_table_row"><td class="iw_attribute_name">Rating:</td><td><span id="rating">' + ratingHtml + '</span></td></tr>';
   }
   if (place.website) {
     var fullUrl = place.website;
     var website = hostnameRegexp.exec(place.website);
     if (website == null) {
       website = 'http://' + place.website + '/';
       fullUrl = website;
     }
     content += '<tr class="iw_table_row"><td class="iw_attribute_name">Website:</td><td><a href="' + fullUrl + '">' + website + '</a></td></tr>';
   }
   content += '</table>';
   return content;
 }

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

html {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(superb-seaside-restaurant-hd-wallpaper-506329.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-size: cover
}
#form {
  font: 20px"Walkway SemiBold";
  letter-spacing: 5px;
  text-align: center;
  padding-bottom: 3px;
  padding-right: 4px;
  padding-top: 3px;
  height: 35%;
  width: 50%;
  background: #ccc;
  margin-bottom: 10px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
  float: left;
}
#header {
  font: 20px"Josefin Slab";
  letter-spacing: 10px;
  background-color: #fff;
  color: #000;
  text-align: center;
  margin-top: 3px;
  padding: 5px;
  width: 1255px;
  background: #ccc;
  margin-bottom: 10px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
}
#map_canvas {
  -webkit-box-shadow: 0 0 10px #bfdeff;
  -moz-box-shadow: 0 0 5px #bfdeff;
  box-shadow: 0 0 7px #bfdeff;
  float: right;
  height: 500px;
  width: 593px;
  padding: 10px;
  margin-right: 3px;
  vertical-align: top;
}
#listing {
  font: 18pt"Nilland";
  letter-spacing: 5px;
  text-align: center;
  padding: 3px;
  height: 500px;
  width: 50%;
  background: #ccc;
  margin-bottom: 10px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
  float: left;
}
#footer {
  font: 20px"DistrictPro-Thin";
  letter-spacing: 10px;
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 3px;
  height: 30px;
  width: 1255px;
  background: #ccc;
  margin-top: 3px;
  margin-bottom: 3px;
  /* Fallback for older browsers without RGBA-support */
  background: rgba(204, 204, 204, 0.5);
  float: left;
}
.placeIcon {
  width: 32px;
  height: 37px;
  margin: 4px;
}
.hotelIcon {
  width: 24px;
  height: 24px;
}
#resultsTable {
  font: 16pt"Nilland-Black";
  border-collapse: collapse;
  width: 450px;
  margin-left: 90px;
  float: left;
  background: rgba(204, 204, 204, 0.5);
}
#rating {
  font-size: 13px;
  font-family: Arial Unicode MS;
}
#keywordsLabel {
  text-align: right;
  width: 70px;
  font-size: 14px;
  padding: 4px;
  position: absolute;
}
.iw_table_row {
  height: 18px;
}
.iw_attribute_name {
  font-weight: bold;
  text-align: right;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Map</title>
  <script src="C:\Users\beesumbernice\Documents\html\html\whole.js"></script>
  <link href="working.css" rel="stylesheet" type="text/css" />
  <script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
</head>

<body>
  <div id="header">
    <h1>
        HEADER
      </h1>
  </div>
  <div id="form">
    Keywords:
    <input id="keyword" type="text" placeholder="Mexican,Italian,Chinese..." />
    <div id="controls">
      <span id="typeLabel">
      Type:
    </span>
      <select id="type">
        <option value="bar">Bars</option>
        <option value="cafe">Cafe</option>
        <option value="restaurant" selected="selected">Restaurants</option>
      </select>
      <span id="rankByLabel">
      Rank by:
    </span>
      <select id="rankBy">
        <option value="prominence">Prominence</option>
        <option value="distance" selected="selected">Distance</option>
      </select>
    </div>
  </div>

  <div id="map_canvas"></div>

  <div id="listing" style="overflow-y: scroll; height:453px;">
    <table id="resultsTable">
      <tbody id="results"></tbody>
    </table>
  </div>

  <div id="footer">
    Credits to Google Maps and <a href="http://mapicons.nicolasmollet.com">Maps Icons Collection</a>
  </div>
</body>

</html>

Answer 1

您必须更改包含的顺序。首先包含 Google Maps API，然后包含依赖于 Google Maps API 的脚本:

Google map 一加载，它就会运行您在 whole.js 最后一行中定义的初始化事件