为什么我不能将 google maps api 中的“place_id”渲染为 ejs 文件？答案

【问题标题】：Why can't I render "place_id" in google maps api to an ejs file?为什么我不能将 google maps api 中的“place_id”渲染为 ejs 文件？
【发布时间】：2017-08-28 07:24:27
【问题描述】：

我正在渲染 maps.ejs 文件：place_id、lat、lng。

如果我在 initMap 函数本身的 maps.ejs 文件中声明“place_id”，则代码运行良好，没有任何错误。但是当我按照代码所示渲染 place_id 时，它会在 chrome 的控制台中出现错误：

(index):34 Uncaught ReferenceError: ChIJN1t_tDeuEmsRUsoyG83frY4 未定义在 initMap ((index):34)

我正在使用 cloud9 并将 API_KEY 作为环境变量导出。

//app.js
var express = require("express");
var app = express();

app.get("/", function(req, res) {
  res.render("maps.ejs", {
    place_id: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    lat: -33.8666199,
    lng: 151.1958527
  });
});

app.listen(process.env.PORT, process.env.IP, function() {
  console.log("Server is ON");
}); // Server start

//maps.ejs
<!DOCTYPE html>
<html>

<head>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<title>Google Maps API</title>

<body>
  <h3>My Google Maps Demo</h3>
  <script>
    function initMap() {
      var uluru = {
        lat: <%=lat%>,
        lng: <%=lng%>
      };
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: uluru
      });

      var infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);

      service.getDetails({
        placeId: <%=place_id%>
      }, function(place, status) {
        console.log(place);
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(
              '<div><strong>' + place.name + '</strong><br>' +
              'Place ID: ' + place.place_id + '<br>' +
              place.formatted_address + '<br>' +
              "Rating : " + place.rating + '</div>');
            infowindow.open(map, this);
          });
        }
      });
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=<%=process.env.API_KEY%>&libraries=places&callback=initMap">
  </script>
  <div id="map"></div>

</body>

</html>

【问题讨论】：

标签： javascript node.js google-maps google-maps-api-3 ejs

【解决方案1】：

Maps API 是一个网络浏览器 API。如果您考虑将其作为 Express 服务器应用程序的一部分进行调试，那么您只会给自己带来麻烦。

相反，在浏览器中查看生成的代码，可以使用查看源代码或使用浏览器的开发人员工具。这将大大简化您的调试。一旦生成的 HTML 和 JavaScript 代码进入浏览器，服务器代码就完全无关紧要了。

也就是说，您遇到的特定错误很可能是由于您的 maps.ejs 文件中的这行代码：

    placeId: <%=place_id%>

当你在浏览器中查看源代码时会看到，这里 Express 生成的代码大概是：

    placeId: ChIJN1t_tDeuEmsRUsoyG83frY4

换句话说，浏览器中的 JavaScript 将 ChIJN1t_tDeuEmsRUsoyG83frY4 视为一个变量名，而不是您可能需要的文字字符串。

要解决这个问题，只需将 ID 放在引号中：

    placeId: "<%=place_id%>"

现在生成的代码将是：

    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4"

现在placeId 将成为预期的字符串。

【讨论】：

我尝试创建一个字符串变量 place_id 但这也不起作用。我的错......非常感谢......这是一个愚蠢的问题。
根本不是一个愚蠢的问题。不要感到难过——这有时会发生在我们所有人身上！我这么快发现它的原因是我自己也犯了同样的错误。 ;-) 请让我知道这是否是问题所在。