Question

我从昨天起就遇到了这个问题。我知道如何创建谷歌地图并添加标记。但是当我尝试将数据从数据库传递到客户端时，我无法使用它。

这是我的代码：

var express = require('express');
var session = require('express-session');
var AWS = require('aws-sdk');
var router = express.Router();

AWS.config.loadFromPath('./config.json');

var sess;

router.get('/', function(req, res, next) {
    sess = req.session;

    var docClient = new AWS.DynamoDB.DocumentClient();
    var table = "Caves";
    var pseudo = sess.login;

    var params = {
        TableName : table,
        ProjectionExpression: "Caracteristiques, Pseudo, Localisation, Lat, Lon"
    };

    console.log("Scanning Movies table.");
    docClient.scan(params, onScan);

    function onScan(err, data) {
        if (err) {
            console.error("Unable to scan the table. Error JSON:", JSON.stringify(err, null, 2));
            res.redirect('/');
        } 
            console.log("Scan succeeded.");
            data.Items.forEach(function(caves) {
                console.log(caves.Pseudo + ": " + caves.Caracteristiques + " / " + caves.Localisation + " / " + caves.Lat + " / " + caves.Lon);
            });

            // continue scanning if we have more movies, because
            // scan can retrieve a maximum of 1MB of data
            if (typeof data.LastEvaluatedKey != "undefined") {
                console.log("Scanning for more...");
                params.ExclusiveStartKey = data.LastEvaluatedKey;
                docClient.scan(params, onScan);
            }
            res.render('recherche', { sess: sess, data: data });
        }
    }
});

module.exports = router;

recherche.jade

.container-fluid
        .row(style='margin-top: 100px')
        input#pac-input.controls(type='text', placeholder='Enter a location')
        #map
        script.
            function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 48.8557, lng: 2.3450},
                    zoom: 12
                });
                var input = (document.getElementById('pac-input'));
                var types = document.getElementById('type-selector');
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
                var autocomplete = new google.maps.places.Autocomplete(input);
                autocomplete.bindTo('bounds', map);
                var infowindow = new google.maps.InfoWindow();
                var marker = new google.maps.Marker({
                    map: map,
                    anchorPoint: new google.maps.Point(0, -29)
                });
                autocomplete.addListener('place_changed', function() {
                    infowindow.close();
                    marker.setVisible(false);
                    var place = autocomplete.getPlace();
                    if (!place.geometry) {
                        window.alert("Autocomplete's returned place contains no geometry");
                        return;
                    }
                    // If the place has a geometry, then present it on a map.
                    if (place.geometry.viewport) {
                        map.fitBounds(place.geometry.viewport);
                    } else {
                        map.setCenter(place.geometry.location);
                        map.setZoom(17); 
                    }
                    marker.setPosition(place.geometry.location);
                    marker.setVisible(true);
                    var address = '';
                    if (place.address_components) {
                        address = [
                            (place.address_components[0] && place.address_components[0].short_name || ''),
                            (place.address_components[1] && place.address_components[1].short_name || ''),
                            (place.address_components[2] && place.address_components[2].short_name || '')
                        ].join(' ');
                    }
                });
            }
        script(async='', defer='', src='https://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places&callback=initMap')

我想为我的数据库中的每个对象添加一个标记，所以我在initMap函数中添加它

for ( var i = 0 ; i < #{data.Items.length} ; i++) {
    console.log(#{data.Items[i].Lat});
}

我有：＆＃34;无法阅读财产＆＃39; Lat＆＃39;未定义＆＃34;

但是当我这样做时：

console.log(#{data.Items[0].Lat});

我有正确的答案

感谢您的帮助！

使用数据库中的数据创建Google Map标记

0 个答案: