dongqiangteng7319 2016-10-09 20:28 采纳率: 0%
浏览 47
已采纳

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

Here is the code, I do get the longitude and latitude from the database, but now cannot writer to Google Javascript Maps API to make red circle on the map. I think there is some problems on Js object.

<?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>
  • 写回答

2条回答 默认 最新

  • drvc63490 2016-10-09 21:14
    关注

    A couple of corrections:

    1. Meta tags are self-closing, so they don't need a </meta>. Refer to MDN for more information.

    2. Get a key for your google maps - refer to the Google Maps documentation for this

      So this: <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
      should become something like:
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=asdf23f2...23f&callback=initMap" type="text/javascript"></script>

    3. Generate the citymap javascript variable using PHP and json_encode see example below. Does each database record have a name column? We need to have a label for each city (e.g. 'chicago', 'vancouver' etc), in order to have a key for each city:
    $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() {
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 shape_predictor_68_face_landmarks.dat
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制