从php数组开始在谷歌地图上绘制标记


Drawing markers on a google map starting from a php array

好吧,我会尽可能清楚地解释我的问题。我已经尝试了很多可能的解决方案,但从未找到合适的解决方案。我还想说,这是我的一个教程,我只是一个结合JS,PHP和GMAPv3API的初学者。我希望有人能帮我解决这个问题。话虽如此,这是我的代码,其中有几行解释了我想做什么

该问题涉及3个主要文件

1)process.php(此文件生成一个坐标数组)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>MyTest</title>
    <link rel="stylesheet" type="text/css" href="css/content.css" />
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
</head>
<body>
    <?php
    ...after some lines of code i build this...
    $myarray = ...;
    ...and here i move to the second file
    echo "<input type='"button'" value='"Next!'" onClick='"location.href='map.html''">";
    ?>
</body>

2)map.html(此文件负责在屏幕上绘制地图)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>MyTest</title>
    <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="http://www.google.com/jsapi"></script>
</head>
<body onLoad="init_map_and_markers()">
    <div id="map_canvas">
    </div>       
</body>

2)gmapinit.js(构建映射并"应该"获取数组作为参数以相应地绘制标记的javascript文件)

function init_map_and_markers() {
var global_markers = [];
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);
//Of course here myarray is not defined but the point is making it available here so i can loop through it and place my markers!
for (var i = 0; i < markers.length; i++) {
    for(var count = myarray.length - 1; count >= 0; --count) { 
        var o = myarray[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);
        });
    }    
}

}

所以主要的问题是,我如何将$myarray从process.php传递到map.html,使其可用于gmapinit.js

我要求避免写下我所做的所有代码测试,因为也许我的所有想法都是错误的。。。这就是为什么我要写下我得到的最"干净"的代码。

代码可能的解决方案将不胜感激,如果我遗漏了什么,请随时询问细节。

非常感谢。

您可以使用标记作为init_map_and_markers()的参数

<body onLoad="init_map_and_markers(<?php echo json_encode($phpArrayMarkersDefinition); ?>)">

然后你可以在函数中访问这个数组:

function init_map_and_markers(markers) 
{
  //....
  for(var i=0;i<markers.length;++i)
  {
    //create the markers here
  }
  //....
}