组合js,php和谷歌地图的问题

时间:2012-03-07 11:45:19

标签: php javascript google-maps-api-3

为了更好地解释我的问题,我认为在我的情况下,代码会说超过千言万语。 只是一个简短的介绍,我的问题是我无法检索内部有一些坐标的json编码数组并将其提供给google地图.js负责在地图上显示它们

这是我在几个文件中的代码。

1)jscookies.js (只是包含我们都可以在javascript中使用的Cookie的文件)

2)process.php (在这里我生成一个带坐标的数组,对其进行编码并通过回显的脚本将其传递给第三个文件map.html,使用cookie)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="css/content.css" />
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
    <script type="text/JavaScript" src="js/jscookies.js"></script> 
</head>
<body>
    <?php
    ...
    ...
    $coordinatesarray = ...;
    echo "<script type=\"text/javascript\"> 
            var my_cord_array =" . json_encode($coordinatesarray) . ";
            setCookie(\"mycookie\", my_cord_array, 1); 
          </script>";
    echo "<input type=\"button\" value=\"Next" onClick=\"location.href='map.html'\">";
    ?>
</body>
</html>

3)map.html (在此文件中我从cookie中检索数组并将其用作gmapinit.js中gmapinit函数的参数)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel=stylesheet type="text/css" href="css/googlemap.css" />
    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbNM4y2fJ4AdCoXcWW-sGXPl5nXaJogPA&sensor=false">
    </script>
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
    <script type="text/JavaScript" src="js/jscookies.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    var my_cord_array = getCookie("mycookie");
    </script>
</head>
<body onLoad="init_map_and_markers(my_cord_array)">
    <div id="map_canvas">
    </div>        
</body>

4)gmapinit.js (负责谷歌地图上所有图纸的gmapinit函数)

function init_map_and_markers(my_cord_array) {
  var global_markers = []; 

//test (the parameter is successfully PASSED!)
/*for(var count = my_cord_array.length - 1; count >= 0; --count) {
     var o = my_cord_array[count];
     var usr = o.user;
     var lati = o.lat;
     var lngi = o.lng;
     alert(usr + " " + lati + " " + lngi);
}*/
//test (the parameter is successfully PASSED!)

  var infowindow = new google.maps.InfoWindow({});
  var latlng = new google.maps.LatLng(27.059126, -41.044922);
  var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  for (var i = 0; i < markers.length; i++) {
    for(var count = my_cord_array.length - 1; count >= 0; --count) { 
      var o = my_cord_array[count];
      var lat = parseFloat(o.lat);
      var lng = parseFloat(o.lng);
      var markerdata = o.user;

      var myLatlng = new google.maps.LatLng(lat, lng);

      var contentString = "<html><body><div><p><h2>" + markerdata + "</h2></p></div></body></html>";

      var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "Coordinates: " + lat + " , " + lng + " | Marker Data: " + markerdata
        });

      marker['infowindow'] = contentString;

      global_markers[i] = marker;

      google.maps.event.addListener(global_markers[i], 'click', function() {
        infowindow.setContent(this['infowindow']);
        infowindow.open(map, this);
      });
    }    
  }

}

结果是做了一些测试并更改了代码,地图没有显示,但有关坐标的数据显示在警报命令或地图中,但没有创建标记。参数数组给出的坐标

可能这个错误真的很愚蠢但是因为我经历了js php和html的组合只有几个月了,我相信我在这里错过了一些东西。

有什么想法吗?

0 个答案:

没有答案