使用 Express 和 Node.js 的 Google Maps API答案

【问题标题】：Google Maps API using Express and Node.js使用 Express 和 Node.js 的 Google Maps API
【发布时间】：2018-08-28 10:50:28
【问题描述】：

我正在尝试使用带有 express/node 的谷歌地图 API 创建一个基本的网络应用程序。目前我的三个文件如下：

server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express()

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')

// Initialize and add the map
function initMap() {
    // The location of Uluru
    var uluru = {
      lat: -25.344,
      lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

app.get('/', function (req, res) {
  res.render('index');
})

app.post('/', function (req, res) {
    res.render('index');
  })

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

style.css

#map {
    height: 400px; 
    width: 100%; 
   }

index.html

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&callback=initMap">
</script>

当我运行应用程序时，返回的错误是“initMap 不是函数”。我一直在网上阅读示例，但我尝试过的一切都没有奏效。我想尽可能少地保留我的 HTML 文件中的 javascript。

【问题讨论】：

你需要在前端而不是后端写function initMap。

标签： javascript html node.js google-maps express

【解决方案1】：

你的代码没有问题

它工作正常，请检查以下内容：

解决方案：将initMap()函数应用于客户端javascript文件，不在server.js

function initMap() {
    // The location of Uluru
    var uluru = {
        lat: -25.344,
        lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
        document.getElementById('map'), {
            zoom: 4,
            center: uluru
        });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}

#map {
    height: 400px; 
    width: 100%; 
}

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=_____&callback=initMap">
</script>


<h3>My Google Maps Demo</h3>
<div id="map"></div>

注意：切勿将您的 API 密钥分享给任何人！

【讨论】：

我可以在您的回答中看到 API 密钥，但在问题上看不到。

【解决方案2】：

重要提示：不要显示您的 API 密钥。人们可以拿走它并为自己使用，您可以获得巨额发票。

您目前正在做的是在后端的 Node.js 中创建标记。您使用的库 (maps.googleapis.com) 用于前端。所以你应该做的是你在 HTML 文件中引用的一个新的 javascript 文件。

例子：

index.html

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
</script>
<script>
function initMap() {
    // The location of Uluru
    var uluru = {
      lat: -25.344,
      lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

如果你不想使用 javascript 内联，在 index.html 所在的目录下新建一个文件，并使用<script src="script.js"></script> 引用它

希望对你有帮助

【讨论】：