将PHP变量传递给Google Maps API [英] Passing PHP variables to the Google Maps API

问题描述

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

我可以这样访问经纬度：

 < ？php 
需要'../connect.php'; 
 session_start（）; 
 $ _SESSION ['username']; 
 
 $ sql =选择纬度，经度FROM userinformation WHERE username ='。 $ _SESSION [用户名。 ; 
 $ result = $ db-> query（$ sql）; 
 
 if（$ result-> num_rows> 0）{
 while（$ row = $ result-> fetch_assoc（））{
 $ lat = $ row [ 纬度]; 
 $ lng = $ row [longitude]; 
 echo $ lat; 
 echo $ lng; 
 
} 
} 
？> 
  

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

 函数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）; 
} 
  

这给了我以下页面：

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

  var js_variable ='<？php echo $ lat;？>' ; 
 document.write（js_variable）; 
 var js_variable1 ='<？php echo $ lng;？>'; 
 document.write（js_variable1）; 
  

然后传入JS变量而不是PHP变量，但输出仍然相同。

  center：{lat：59.325 ，lng：18.070} 
位置：{lat：59.327，lng：18.067} 
  

解决方案

当我用小提琴替换字符串 {lat：'30 .365273'，lng：'-81.699600'} ，我得到一个由API报告的javascript错误： Assertion failed：InvalidValueError：setPosition：不是LatLng或LatLngLiteral：属性lat：不是数字。

如果我使用 parseFloat $ b

代码片段：

 函数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％;宽度：100％; margin：0px; < script src =https：//   

$ c $函数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）;
}





When a user signs up to my application (college project), they are asked for their address. I convert this address to latitude and longitude and then store it in my database.

I access the latitude and longitude like so:

<?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;

        }
    }
?>

I then try to pass the $lat and $lng variable into the Maps API script like so:

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);
}

This gives me the following page:

I have also tried converted the PHP variables to JS:

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

I then pass in the JS variables instead of the PHP variables, however the output is still the same. What would be the correct way to pass a variable as lat/lng instead of a hardcoded value:

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

解决方案

When I replace the values in the fiddle with strings {lat: '30.365273', lng: '-81.699600'}, I get a javascript error reported by the API: Assertion failed: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number.

If I use parseFloat on those strings, it works:

code snippet:

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>

change your PHP to be:

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);
}

这篇关于将PHP变量传递给Google Maps API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！