我不能让Googe API访问我的php数组的纬度和经度

q43xntqr  于 2022-10-30  发布在  PHP
关注(0)|答案(1)|浏览(120)

我从我的数据库中查询了纬度和经度,并使用数组将这些值存储在php中。由于我必须使用javaScript来使用Google API,因此我将数组传递给javaScript数组,但当我尝试使用addMarker函数传递纬度和经度时,标记没有显示。如果使用Json的方式传递php数组有问题,我也会这样做。
var lat = "[{"latitude":"-73.44282246117739"},{"latitude":"-73.43353928556874"},{"latitude":"-74.01881776353744"},{"latitude":"-74.0188170929852"}]"; var lng = "[{"longitude":"40.73354088144067"},{"longitude":"40.76232657450102"},{"longitude":"40.64831233555079"},{"longitude":"40.648312844313715"}]"; var name = "[{"name":"Saint Kilian"},{"name":"Island Harvest"},{"name":"Long Island Cares Inc"},{"name":"City Harvest"}]"; var urls = "[{"url":"https:\/\/stkilian.com\/"},{"url":"https:\/\/www.islandharvest.org\/"},{"url":"https:\/\/www.licares.org\/"},{"url":"http:\/\/www.cityharvest.org\/"}]"; var map;
`

This is the javascript Code
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        width: 600px;
        height: 400px;
        margin-left: 50%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var lat =      <?php echo json_encode($latitudes); ?>;
      var lng =     <?php echo json_encode($longitudes); ?>;
      var name =      <?php echo json_encode($names); ?>;
      var urls =      <?php echo json_encode($urls); ?>;
      var map;
      var latLong = {};

      lat.forEach((element, index) => {
        latLong[element] = lng[index];
        });

      function initMap() {

          map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: {lat: 40.75296142342573 , lng: -73.42661893505269},
        });

     addMarker(latLong);

          function  addMarker(){

            console.log(myLatlng);
            var markerMap= new google.maps.Marker({
            position: {myLatlng[0]},
            map,
          });

         const popUp = "Hi";
          //Info Windows
          const detailWindow = new google.maps.InfoWindow({
              content: popUp,
               ariaLabel: "Food Bank",
          });

          markerMap.addListener("click", ()=>{
              detailWindow.open({
              anchor: markerMap,
              map,

          });
          });
          }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api  /js?key=AIzaSyAZ6ZwWXOJ8pVydaLK4bdlpM9PkOD65cro&callback=initMap"
    async defer></script>
  </body>
</html>

`
由于某些原因,只适用于静态的纬度和经度。

xzv2uavs

xzv2uavs1#

这可能会有帮助。
Remember json_encode() parameter must be array or object.
在javascript中使用单引号或双引号将JSON数据括起来。

var lat = `<?php echo json_encode($latitudes); ?>`;
var lng =`<?php echo json_encode($longitudes); ?>`;
var name =`<?php echo json_encode($names); ?>`;
var urls =`<?php echo json_encode($urls); ?>`;
wqsoz72f

wqsoz72f2#

我解决了这个问题,我在PHP中使用了关联提取,我的数组变成了对象,而不是数组。在我按行提取并在JavaScript中访问数据时使用parseFloat后,我能够显示标记。

enter $sql1= "SELECT latitude
        FROM locations";       
$result1 = mysqli_query($mysqli, $sql1);
$lat =  array();
if(mysqli_num_rows($result1)>0){
    while($row =  mysqli_fetch_row($result1)){
    $lat[] = $row;
    }
}here

enter addMarker(parseFloat(lng[0]),parseFloat(lat[0]));here

相关问题