InvalidValueError：setCenter：不是具有有限坐标的 LatLng 或 LatLngLiteral：在属性 lat：NaN 不是可接受的值答案

【问题标题】：InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted valueInvalidValueError：setCenter：不是具有有限坐标的 LatLng 或 LatLngLiteral：在属性 lat：NaN 不是可接受的值
【发布时间】：2020-02-29 13:01:05
【问题描述】：

我正在通过谷歌地图制作地图，目的是在地图上显示 2 个点，一个点已经预定义，另一个点将使用数据库坐标制作。

问题在于，即使数据库坐标是通过 parseFloat 函数浮动的，google maps 也会将这些值标识为 NaN，因为警报可以正常工作。

数据库：

CREATE DATABASE DB_USUARIOS;
USE DATABASE DB_USUARIOS;
CREATE TABLE TB_USERS(
    USU_CODIGO INT PRiMARY KEY AUTO_INCREMENTE,
    USU_LATITUDE FLOAT(10,7) NOT NULL,
    USU_LONGITUDE FLOAT(10,7) NOT NULL
);

<?php
        	$consulta=$MySQLi->query("SELECT * FROM TB_USUARIOS");
        	$resultado = $consulta->fetch_assoc();
        ?>
        <html>
           <head>
           </head>
           <body>
              <div id="map"> </div>
              <script>
                 var latitude_cli = <?php echo $resultado['USU_LATITUDE'];?>; 
                 var longitude_cli = <?php echo $resultado['USU_LONGITUDE'];?>; 
                 alert(`${parseFloat(longitude_cli)} `);
                 alert(`${parseFloat(latitude_cli)} `);
        
                 function initMap() {
                    var ponto1 = newgoogle.maps.LatLng(parseFloat(latitude_cli),parseFloat(longitude_cli));
                    var ponto2 = new google.maps.LatLng(36.522793, -83.212665);
        
                    var map = new google.maps.Map(document.getElementById('map'),
                    {zoom: 4, center: ponto2});
        
                    var marker = new google.maps.Marker({position: ponto1, map: map, 
                    title:"Produto"});
        
                    var marker1 = new google.maps.Marker({position: ponto2, map: 
                    map,title:"Você"});
                    
                 }
              </script>
              <script async defer
                 src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
           </body>
        </html>

【问题讨论】：

发布的代码不会重现您的问题 (fiddle)。请提供一个 minimal reproducible example 来演示该问题（最好是问题本身中的 StackOverflow 代码 sn-p）。
请在下面查看我的答案，如果有帮助请告诉我。另外，我已从您的问题中删除了您的 API 密钥。请不要在公共网站上共享私有 API 密钥，并确保按照 developers.google.com/maps/… 限制它们

标签： javascript php google-maps

【解决方案1】：

当您注销latitude_cli 和longitude_cli 时，您的坐标是什么样的？确保它们是数字或字符串。下面的 sn-p 没有问题：

<html>

<head>
</head>

<body>
  <div id="map" style="height:400px;width:400px"> </div>
  <script>
    function initMap() {
      var ponto1 = new google.maps.LatLng(parseFloat("36.5"), parseFloat("-83.2"));
      var ponto2 = new google.maps.LatLng(36.522793, -83.212665);

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: ponto2
      });

      var marker = new google.maps.Marker({
        position: ponto1,
        map: map,
        title: "Produto"
      });

      var marker1 = new google.maps.Marker({
        position: ponto2,
        map: map,
        title: "Você"
      });

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

</html>

【讨论】：