在從PHP數組開始的谷歌地圖上繪製標記

好的，我會盡可能清楚地解釋我的問題。我已經嘗試了很多可能的解決方案，但從來沒有找到合適的解決方案。我也想說這是一個教程，我只是一個初學者結合JS，PHP和GMAPv3的API。我希望有人能幫助我解決這個問題。這就是說，這裏是我的代碼，用幾行來解釋我想要做什麼。在從PHP數組開始的谷歌地圖上繪製標記

該問題涉及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？

我在問這個避免寫下我做過的所有代碼測試，因爲也許我的所有想法都是錯誤的......這就是爲什麼我寫下了我得到的最「乾淨」的代碼。

代碼可能的解決方案將不勝感激，並毫不猶豫地問細節，如果我錯過了什麼。

非常感謝。

來源

2012-03-19 Francesco

您可以使用標記作爲論據init_map_and_markers（）

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

..then您可以訪問函數內部數組：

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

    //.... 
}

來源

2012-03-19 11:31:39

是的！這實際上是我實施的可能解決方案之一。但問題是該數組在map.html上不可用，只能在process.php中使用。考慮到數組是搜索命令的結果，因此通過它的最佳做法是什麼，因此是動態的。 – Francesco 2012-03-19 11:44:04

您可以使用隱藏的表單域並將結果發佈到map.html，然後您將能夠訪問map.html中的結果。 – 2012-03-19 11:49:20

你能爲我的案例提供一個例子嗎？我不知道該怎麼做，特別是因爲js函數在body的起始處被調用，從而阻止我編寫任何類型的代碼來檢索map.html中的變量。謝謝您的幫助。而且，這是做到這一點的最佳方式嗎？對我來說似乎很不安全。 – Francesco 2012-03-19 12:07:38

在從PHP數組開始的谷歌地圖上繪製標記

回答

相關問題