傳遞res.locals變量到GoggleMaps中斷initMap函數

Question

我遇到了Google Map initMap函數的問題。我正在使用Express並嘗試傳遞一組位置以在地圖上製作標記。當我將視圖中的變量集合傳遞給視圖中的腳本時，它會中斷initMap函數，並出現錯誤：initMap不是一個函數，它調用使用initMap作爲其回調函數的延遲腳本。但是，如果我刪除位置變量，則地圖只在沒有任何標記的情況下正確加載。這裏是我的代碼：

<script> 
     window.initMap = function() { 
     var userLocation = {lat: 40.7410986, lng: -73.9888682}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 16, 
      center: userLocation 
     }); 
      var locations = <%=JSON.stringify(locations)%> 
      console.log(locations) 

      var infowindow = new google.maps.InfoWindow(); 
      for(let i = 0; i < locations.length; i++) { 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)); 
     } 
     } 
    </script> 

感謝您的幫助。

Answer 1

你的代碼可能會產生一個JS錯誤（所以它總是值得檢查你的瀏覽器的JS控制檯）。

代替使用<%= ... %>（這確實HTML/XML型逸出），使用<%- ... %>產生unescaped output的：

var locations = <%- JSON.stringify(locations) %>