传递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) %>