将 PHP 变量传递给 Google Maps API

Question

当用户注册我的应用程序（大学项目）时，系统会要求他们提供地址。我将此地址转换为纬度和经度，然后将其存储在我的数据库中。

我像这样访问纬度和经度：

<?php
    require '../connect.php';
    session_start();
    $_SESSION['username'];

    $sql = "SELECT latitude, longitude FROM userinformation WHERE username = '". $_SESSION['username']. "'";
$result = $db->query($sql);

    if($result->num_rows > 0){
        while($row = $result->fetch_assoc()){
            $lat = $row["latitude"];
            $lng = $row["longitude"];
            echo $lat;
            echo $lng;

        }
    }
?>

然后我尝试将 $lat 和 $lng 变量传递给 Maps API 脚本，如下所示：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: '<?php echo $lat;?>', lng: '<?php echo $lng;?>'}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: '<?php echo $lat;?>', lng: '<?php echo $lng;?>'}
  });
  marker.addListener('click', toggleBounce);
}

这给了我以下页面：

我也尝试将 PHP 变量转换为 JS：

var js_variable  = '<?php echo $lat;?>';
document.write(js_variable);
var js_variable1  = '<?php echo $lng;?>';
document.write(js_variable1);

然后我传入 JS 变量而不是 PHP 变量，但输出仍然相同。将变量作为 lat/lng 而不是硬编码值传递的正确方法是什么：

center: {lat: 59.325, lng: 18.070}
position: {lat: 59.327, lng: 18.067}

Answer 1

当我替换 the fiddle with strings {lat: '30.365273', lng: '-81.699600'} 中的值时，我收到 API 报告的 javascript 错误：Assertion failed: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number。

如果我在这些字符串上使用parseFloat，它会起作用：

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: parseFloat('30.365273'),
      lng: parseFloat('-81.699600')
    }
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {
      lat: parseFloat('30.365273'),
      lng: parseFloat('-81.699600')
    }
  });
  marker.addListener('click', toggleBounce);
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

将您的 PHP 更改为：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: parseFloat('<?php echo $lat;?>'), lng: parseFloat('<?php echo $lng;?>')}
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {lat: parseFloat('<?php echo $lat;?>'), lng: parseFloat('<?php echo $lng;?>')}
  });
  marker.addListener('click', toggleBounce);
}

Answer 2

我认为让 PHP 将值直接回显到您的 JavaScript 中可能是问题所在。尝试将 lat 和 lng 作为参数传递给 map 函数。

function initMap(myLat, myLng) {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(myLat, myLong)
  });

  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(myLat, myLong)
  });
  marker.addListener('click', toggleBounce);
}

编辑：尝试使用谷歌地图功能设置纬度和经度，如上所述。