我如何从 MySQL db 和谷歌地图上的 pin 标记 api 获取坐标

Question

This is the code I have, I can console.log the coords from db but I can't pin markers on index.html page, why?. Is it possible to return the "markers" array to initMap function and use it from there, because if i use some sample array in initMap function it pins successfully markers on the map. But I never managed how to pin those markers with the coords I get from MySQL db. Please help

var express = require('express');
var mysql = require('mysql');
var app = express();
var markers=[];
var coords;


var connnection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "sampleDB"
});

connnection.connect(function(error) {
  if (!!error){
      console.log('Error');
    }
    else{
      console.log('Connected');
    }
});


app.get('/', function(req, resp){
  //about mysql
  connnection.query("SELECT * FROM mySampleCoords", function (error, rows, fields) {
    if (!!error){
      console.log('Error in the query');
    }
    else{
      console.log("SUCCESS");
      //console.log(rows[0]);
      rows.forEach(function(entry, index) {
      var coordonate = {
        coords:{lat:entry.lat, lng:entry.lng}
      }
      markers.push(coordonate);

      });

      console.log(markers);

      //for(var i=0;i<markers.length;i++){
        //console.log(i, markers[i]);}


      /*
        for(var i = 0;i < markers.length;i++){
          // Add marker
          addMarker(markers[i]);
        }

        // Add Marker Function

        function addMarker(props){
          var marker = new google.maps.Marker({
            position:props.coords,
            map:map,
            //icon:props.iconImage
          });

          // Check for customicon
          if(props.iconImage){
            // Set icon image
            marker.setIcon(props.iconImage);
          }

          // Check content
          if(props.content){
            var infoWindow = new google.maps.InfoWindow({
              content:props.content
            });

            marker.addListener('click', function(){
              infoWindow.open(map, marker);
            });
          }
        }

        //end of fct addMarker
        */
      //console.log(markers);
      //console.log(markers.length);
      resp.send(markers);
    }//else
  });//conn.query
}) //app.get
  app.listen(1337);


//------------------------------------------------------------------------------


function initMap(){
      // Map options
      var options = {
        zoom:2.35,
        center:{lat:45.2890,lng:21.8877}

      }

      // New map
      var map = new google.maps.Map(document.getElementById('map'), options);
      var heatmap = new google.maps.visualization.HeatmapLayer({
        data: getPoints(),
        radius: 20,
        map: map
      });
      console.log("mesan din initMap");



      for(var i = 0;i < markers.length;i++){
        // Add marker
        addMarker(markers[i]);
      }

      // Add Marker Function

      function addMarker(props){
        var marker = new google.maps.Marker({
          position:props.coords,
          map:map,
          //icon:props.iconImage
        });

        // Check for customicon
        if(props.iconImage){
          // Set icon image
          marker.setIcon(props.iconImage);
        }

        // Check content
        if(props.content){
          var infoWindow = new google.maps.InfoWindow({
            content:props.content
          });

          marker.addListener('click', function(){
            infoWindow.open(map, marker);
          });
        }
      } //end of fct addMarker


    }

Answer 1

You're sending the coordinates in the wrong format. You should change this

      var coordonate = {
        coords:{lat:entry.lat, lng:entry.lng}
      }

to this

    var coordonate = new google.maps.LatLng(entry.lat, entry.lng);

You need to call initMap something like this

<script src="https://maps.googleapis.com/maps/api/js?key=[YOURKEY]&libraries=places&callback=initMap"
        async defer></script>