JavaScript「初始化」未定義，但函數存在

我正在嘗試使用多個標記加載谷歌地圖。這段代碼被稱爲在onload事件：JavaScript「初始化」未定義，但函數存在

<body onload="initialize()">

這裏是有問題的JavaScript，一個<script>部分中：

var map; 
    var address = String("Chicago, Illinois")+" USA"; 
    var lat = null; 
    var long = null; 
    var country = null; 
    var geocoder = new google.maps.Geocoder(); 
    var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true}); 
    var iw = new google.maps.InfoWindow(); 
    oms.addListener('click',function(marker) { 
     iw.setContent(marker.desc); 
     iw.open(map,marker); 
    }); 

    var contentString = '+String("Soldier Field")+"<br>"+latlng+' 
    var infowindow = new google.maps.InfoWindow(); 
    var marker, i, markerAddress; 
    var facilities = "Soldier Field"; 
    var cities = "Chicago"; 
    var states = "Illinois"; 
    var coords = "41.862338,-87.615855"; 
    var phones = "312-235-7000"; 
    var url = "www.soldierfield.net"; 
    var briefText = "descriptive text"; 
    var lastUpdated = "2014-05-02"; 
    var overallContactName = "John Smith"; 
    var overallContactPhone = "312-235-7000"; 
    var overallContactEmail = "[email protected]"; 
    var latlngStr; 
    var image = { 
     url: 'https://www.google.com/mapfiles/kml/paddle/ylw-stars.png', 
     size: new google.maps.Size(40, 40), 
    }; 

    var address_components = null; 
    var tmpResult = null; 
    var markers = [] 


    function initialize() { 

     var latlng = new google.maps.LatLng("41.862338", "-87.615855"); 
     //check if address in the US 
     $.ajax({ 
      url: 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+{{lat}}+','+{{long}}+'&sensor=false', 
      async: false, 
      dataType: 'json', 
      success: function(data) { 
       $.each(data.results[0].address_components, function(index,comp) { 
        if (comp.types == 'country,political') { 
         country = comp.short_name; 
         return; 
        } 
       }); 
      } 
     }); 
     if (country == "US") { 
      var mapOptions = {zoom: 8,center: latlng, scrollwheel: false,}; 
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

      var circle = new google.maps.Circle({ 
       center: latlng, 
       radius: {{search_distance}} * 1609.34, 
       strokeColor: "#0000FF", 
       strokeOpacity: 0.6, 
       strokeWeight: 0.5, 
       fillColor: "#0000FF", 
       fillOpacity: 0.05, 
       });   
      circle.setMap(map); 
      map.fitBounds(circle.getBounds()); 
      drop(); // drop pins! 
      } 
    } // map initialized 

    function geocode(facility,city,state) { 
     $.ajax({ 
        url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+encodeURIComponent(facility)+"+"+encodeURIComponent(city)+"+"+encodeURIComponent(state)+'&sensor=false', 
        async: false, 
        dataType: 'json', 
        success: function(data) { 
         console.log('https://maps.googleapis.com/maps/api/geocode/json?address='+encodeURIComponent(facility)+"+"+encodeURIComponent(city)+"+"+encodeURIComponent(state)+'&sensor=false') 
         console.log(data.status) 
         lat = data.results[0].geometry.location.lat; 
         lng = data.results[0].geometry.location.lng; 
         address_components = data.results[0].address_components; 

        } 
       }) 
     return [lat, lng, address_components]; 
    } 
    function drop() { 

     for (j = 0; j < facilities.length; j++) { 
      setTimeout(function() { 
       addMarker(); 
      }, j*200); 
     } 
    } 
    function addMarker() { 
     latlngStr = coords[j].split(","); 
     tmpResult = geocode(facilities[j],cities[j],states[j]); 
     lat = tmpResult[0] 
     lng = tmpResult[1] 
     address_components = tmpResult[2] 

     // clever solution to parse address_components: http://stackoverflow.com/a/16429122/3058197 
     var components = {}; 
     jQuery.each(address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});}) 

     latlng = new google.maps.LatLng(lat,lng); 
     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: facilities[j], 
      animation: google.maps.Animation.DROP, 
      })); 
     oms.addMarker(marker); 
     markers.push(marker); 
    }

我在JavaScript控制檯中看到的錯誤是：

ReferenceError: initialize is not defined

有什麼想法？由於

來源

2014-05-02 user3058197

Javascript總是在'

的可能的問題是：

您必須停止腳本的解析，所以一切後的誤差是未定義的腳本錯誤。檢查你的錯誤控制檯的腳本解析錯誤，並修復你找到的所有內容。除非您使用某種模板引擎替換這些代碼，否則這樣的代碼不是合法的javascript：var cities = {{cities}};。
您的函數initialize()未在全局範圍中定義（它必須用於onload屬性的初始化）。如果是這種情況，那麼您需要以不同的方式將其分配給onload，以便您可以使用不在全局範圍內的函數或將其移至全局範圍。

僅供參考，因爲你似乎已經使用jQuery，您可以使用jQuery的內置功能，而不是等待onload事件：

$(document).ready(initialize);

雖然這隻會解決您的問題，如果它是上面的＃2（並且你把這行代碼放在與initialize函數相同的範圍中），而不是如果問題是上面的＃1。

P.S.如果你分享一個正在運行的頁面鏈接，我們可以在幾分鐘內解決這個問題，而不是隻是猜測。

來源

2014-05-02 15:34:12 jfriend00

不知道爲什麼，他並沒有叫你的功能，但是，我通常使用下面的方法來調用INITIALISE方法...

<html> 
<head> 
... 
</head> 
<body> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
    function initialise(){ 
    ... 
    } 
    google.maps.event.addDomListener(window, 'load', initialise); 
</script> 
...

來源

2014-05-02 15:36:15 Aurovrata

它不起作用。請檢查被調用函數的名稱（看起來錯字錯誤，請編輯它或者請刪除這個答案） – ArunRaj

很對，我在聽衆打來電話時輸入了錯字...謝謝指出！在代碼中更正... – Aurovrata

@ user3058197：有很多錯字的錯誤和誤解是你的代碼。

請查看以下

Line 14: var contentString --- Missing semicolon. 
Line 31: size: , --- Extra comma at the last line. 
Line 36: var markers --- Missing semicolon. 
Line 44: Dont pass null values better use the following 

var latLng = new google.maps.LatLng("41.862338", "-87.615855"); 
//check if address in the US (The below is better than your previous code) 
$.ajax({ 
url: 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+ latLng 
+'&sensor=false'}); 
Line 57: var mapOptions = {,}; --- Extra comma at the end of the json object.

我只是指出了一些東西。請使用firebug來調試您的JavaScript代碼。請經過這個documentation

來源

2014-05-03 02:59:24 ArunRaj

相關問題