0

動作中のインタラクティブなGoogleマップV2をV3に移行します。ここでは、Webユーザーがフォームフィールドを介して郵便番号を入力します。このフォームフィールドは、PHPスクリプトを介してデータベースでクエリを実行するjavascript関数を呼び出します。PHPスクリプトはjscript配列を返す必要があります。

（フォームボタンをクリックして）jscript関数が呼び出されても、何も起こりません。または、PHPスクリプトが期待どおりにjscript配列を返していません

エラーコンソールはエラーを報告せず、firebugは関数と配列変数を期待どおりに表示しますが、配列変数は空です。

検索機能を備えたV3を実装した人は、私が行っていることを見て、アドバイスを与えることができますか？前もって感謝します：

HTMLから

Enter Zip Code: <input type="text" id="zip" /><input type="button"
onclick="seachLocationsNear()" value="Search Locations" /></p>

jscriptから

 function searchLocationsNear(zip) {
 var zipcode = document.getElementById('zip').value;
 var storeloc = 'dbsearch_genArray.php?zip=' + zipcode;
 }

phpから

 //query works as expected, returns $result
 //http://www.octoberblue.net/eztrip/dbsearch_genArray.php
 //using while loop to assign query result to jscript array storeloc
 while ($row = @mysql_fetch_assoc($result)){
 print "storeloc.push($row['address'],$row['lat'],$row['lng']);";
 }

これが完全なJavaScriptです // 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// call setMarkers function on initialization
setMarkers(map, storeloc);
}   

/*
* Define Variables
* storeloc - multidim array, elements title[0],lat[1],lng[2]
* image - string, relative path (from parent html) to icon
* infoWindow - obj, contains info window constructor 
*/
// Works as expected when array is statically defined 
/* var storeloc = [
*   ['4141 Rockside Rd Seven Hills OH', 41.400, -81.663],
*   ['7515 Auburn Road Painesville', 41.66, -81.24],
*   ['2496 E Aurora Road Twinsburg', 41.301218, -81.46940]
*   ];
*/
var image='img/maps_logo.png';   
var infoWindow = new google.maps.InfoWindow({maxWidth:100});
    var marker = new Array();

/*
* dynamically populate the storeloc array when searchLocationsNear() 
* function is called on button click.
*/
function searchLocationsNear(zip) {
var zipcode = document.getElementById('zip').value;
var storeloc = 'dbsearch_genArray.php?zip=' + zipcode;
}

/*
* Define setMarkers function with map and locations parameters
* locations contain storeloc multidim array, called in initialize block.
*/
function setMarkers(map, locations) {
var i;
for (i = 0; i < locations.length; i++) {
  var locate = locations[i];
  var myLatLng = new google.maps.LatLng(locate[1], locate[2]);
  marker[i] = new google.maps.Marker({
     position: myLatLng,
     map: map,
     icon: image,
     title: locate[0]
     });
     google.maps.event.addListener(marker[i],'click',function(){
        markerClick(this);
     });
} //close for loop
} //close setMarkers function

/*
* instanciate InfoWindow for each marker
*/
function markerClick(mark){
var n;
for (n=0; n < marker.length; ++n) {
   if (marker[n] == mark) {
   var infoContent = marker[n].title;
       infoWindow.setContent('<p>Store Location Is:<br>' + infoContent + '</p>');
       infoWindow.open(marker[n], mark);
    }
}
}

/*
* clear markers function, v3 requires the developer to keep
* track of markers and overlays through array.
*/
function clearMarkers() {
infoWindow.close();
var i;
for (i=0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
}
markerArray.length=0;
}

google.maps.event.addDomListener(window,'load',initialize);
 //]]>

コメントで述べたように、storeloc配列が静的に定義されている場合、実装は期待どおりに機能しています。しかし、ユーザー入力を使用して配列を動的に作成しようとした場合はそうではありません。

よろしくお願いします、RWhite35

4

1 に答える 1

0

「試行錯誤」の長い徹底的な1週間の後、私はついに私のインタラクティブなGoogleマップに郵便番号による検索機能を完備させました。上記の簡単な答えは次のとおりです。

ユーザーは、店舗の場所のクライアントのMySQLデータベースに対してPHPクエリを実行するフォームを介して郵便番号を入力します。次に、JSON（json_encode（））を使用して、PHP配列がJavascript配列に割り当てられます。

 /* assume form input/PHP/MySQL query rans as expect, left out for brevity.
 * $result is a resource id returned by the query process (class object)
 */
 while ($row=@mysql_fetch_assoc($result)){
  $arrLocations[] = (
     array($row['address'],$row['lat'],$row['lng'])
     );
 }
 // Now use JSON to encode the multidim array for JavaScript
 // PHP 5.2 note, must enable in PHP.INI, use cmd line to check: php -i

 $arrPassed = json_encode($arrLocations);

?> //duck out of PHP and in to JS
<script type="text/javascript"> var storeloc = <?php echo $arrPassed ?>;</script>
<?php
//continue PHP and clean up any closures, connections etc.

この時点で、有効なJavaScriptマルチディメンション配列があります。上記のsetMarkers関数に渡すことができ、残りは実行されます。秘密のソースはJSONエンコーディングです。php.net Webサイトでjson_encode（）を確認してください。これは、PHPマルチディメンション配列をJavaScriptに割り当てるために私が見つけた最もクリーンで簡単なアプローチでした。よろしく、rwhite35

于 2012-04-14T00:14:09.123 に答える