javascript - 使用 Express 和 Node.js 的谷歌地图 API

Question

我正在尝试使用 google maps API 和 express/node 创建一个基本的网络应用程序。目前我的三个文件如下:

服务器.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!')
})

样式.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。

Answer 1

你的代码没有问题

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

Solution : apply initMap() function to client side javascript file,not in 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>

Note : NEVER SHARE YOUR API-Key to anyone!