Question

这是代码，我从数据库中获取经度和纬度，但现在无法编写Google Javascript Maps API来在地图上制作红圈。我认为Js对象存在一些问题。

<?php
    error_reporting(0);
    $db = new mysqli("localhost", "root", "", "app");
    if ($db->connect_errno) {
        die("<center>Sorry, please check your network connection!</center>");
    }

    $longiArray = array();
    $latitArray = array();
    $num        = 0;

    $longitude = $db->query("SELECT * FROM water");
    $longitude->num_rows;

    while ($row = $longitude->fetch_object()) {
        $longiArray[$num] = $row->longi;
        $latitArray[$num] = $row->latit;
        $num++;
    }
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
                <meta charset="utf-8">
                    <title>
                        Circles
                    </title>
                    <style>
                        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
                    </style>
                </meta>
            </meta>
        </head>
        <body>
            <div id="map">
            </div>
            <script>

    var city = new Array();
    var counter = <?php echo"$num";?>;
    for (var x = 0; var x < counter; var x++){
      var citymap = {
        city[x] = {
          center: {lat: <?php echo"$latitArray[x]";?>, 
          lng: <?php echo"$longiArray[x]";?>},
          population: 10
        },
      }
    };

    function initMap() {
      // Create the map.
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: {lat: -28.73226, lng: 24.76232},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });

     for (var city in citymap) {

       var cityCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: citymap[city].center,
        radius: Math.sqrt(citymap[city].population) * 100
      });
    }



    }
            </script>
            <script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=Google API Key here &signed_in=true&callback=initMap">
            </script>
        </body>
    </html>

Answer 1

错误来自javascript中的cityArray。像贝娄一样正确：

<?php 
echo "var city = new Array();";
echo "var counter = $num";
for($x=0 ; $x<$num ; $x++){
      echo "var citymap = {".
        "city[x] = {".
          "center: {lat: $latitArray[$x] ,". 
          "lng: $longiArray[$x] }, ".
          "population: 10".
        "},".
      "}";
}
?>

Answer 2

一些更正：

元标记是自动关闭的，因此它们不需要</meta>。有关详细信息，请参阅MDN。
获取谷歌地图的密钥 - 请参阅Google Maps documentation for this

所以这个：<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
应该成为：<script async defer src="https://maps.googleapis.com/maps/api/js?key=asdf23f2...23f&callback=initMap" type="text/javascript"></script>
使用PHP和json_encode生成citymap javascript变量，请参阅下面的示例。每个数据库记录都有name列吗？我们需要为每个城市设置一个标签（例如“芝加哥”，“温哥华”等），以获得每个城市的钥匙：

$longitude = $db->query("SELECT * FROM water");
//$longitude->num_rows;//what is the point of this line?
$cityMap = array();
while ($row = $longitude->fetch_object()) {
  //presuming we have a name column - otherwise assign from another source (e.g. array of cities)
  $cityMap[$row->name] = array(
    'center' => array(
      'lng' => $row->longi,
      'lat' => $row->latit
    ),
    'population' => 10
  );
?>
<!-- in the html body .... -->

<script>

var citymap = <? echo json_encode($cityMap); ?>;

function initMap() {

如何将php数组传递给Google JavaScript Map API制作标签？

2 个答案: