从Dynamo Db获取位置坐标并在Google地图上显示多个标记

时间:2019-04-03 05:11:50

标签: javascript google-maps amazon-dynamodb

我是JavaScript新手。因此,对于你们中的许多人来说,这可能是一件非常基本的事情。我想获取存储在dynamo DB表中的经纬度值,并在相应的获取位置上显示标记。到目前为止,我可以使用以下代码从表中获取值:

AWS.config.update({
  region: "us-east-1",
  accessKeyId: "myAccessKeyId",
  secretAccessKey: "MySecretAccessKey"
});

var docClient = new AWS.DynamoDB.DocumentClient();

function scanData() {
    document.getElementById('textarea').innerHTML += "Scanning for locations..." + "\n";

var params = {
    TableName: "tablename"
};

docClient.scan(params, onScan);

function onScan(err, data) {
    if (err) {
        document.getElementById('textarea').innerHTML += "Unable to scan the table: " + "\n" + JSON.stringify(err, undefined, 2);
    } else {
        // Print all the locations
        document.getElementById('textarea').innerHTML += "Scan succeeded. " + "\n";
        data.Items.forEach(function(location) {
            document.getElementById('textarea').innerHTML += "Vehicle ID:" + location.Vehicle_Id + "Latitude:" + location.Latitude + "Longitude:" + location.Longitude + "\t";
        });
  }
}}

并在textArea中显示以上代码的输出,我得到了以下结果:

Scanning for locations...
Scan succeeded. 
Vehicle ID:2Latitude:28.435434Longitude:77.874484   Vehicle ID:393956852Latitude:28.61218600999564Longitude:77.36407527700066   Vehicle ID:1607489221Latitude:28.542737625539303Longitude:77.29848839342594 Vehicle ID:573664824Latitude:28.4175018Longitude:77.0268963 Vehicle ID:1Latitude:28.254454Longitude:77.884343   Vehicle ID:1056285462Latitude:28.373128333333337Longitude:77.93735  Vehicle ID:354381973Latitude:28.182219999999997Longitude:77.97383833333333

现在,请告诉我如何使用这些位置在地图上显示多个标记。我已经通过使用List在Java中实现了这一点。但是我不熟悉如何在JavaScript中执行此操作。请帮帮我。

1 个答案:

答案 0 :(得分:0)

所以最终我完成了以下任务:

var docClient = new AWS.DynamoDB.DocumentClient();
var markers= [];
function initMap() {
var params = {
    TableName: "tablename"
};

docClient.scan(params, onScan);

var noida = {lat: 28.475, lng: 77.601};
// The map, centered at Noida
var map = new google.maps.Map(
    document.getElementById('map'), {zoom: 10 , center: noida});
function onScan(err, data) {
    if (err) {
    alert("Ooops!! Some error occurred");
    } else {
        // Show markers at fetched locations
        data.Items.forEach(function(location) {
            var lati = location.Latitude;
            var longi = location.Longitude;
            var v_id  = location.Vehicle_Id;
            var latlng= new google.maps.LatLng(lati, longi);
            var iconimg = "https://img.icons8.com/ios/25/000000/sedan-filled.png"
        markers.push(new google.maps.Marker({position:latlng,map: map, title:"Vehicle No. "+ v_id.toString(), icon: iconimg}));
        });        
    }
}

}