これは、
Perl で、Goolge Maps からルートを検索する方法 に対するブラウザ側の処理の例である。以下のコードを参考にして欲しい。repaint メソッドの中でパスを描画している。前提としては以下の通り。
- このスクリプトは呼び出し元の HTML から your_ajax_script.js としてリンクされている。
- このスクリプトが呼ばれる HTML には、
があるとする。
- init メソッドは、HTML の onLoad から呼ばれるものとする。
your_ajax_script.js の例
//<![CDATA[
var BASE_URL = 'https://yourdomain.com';
var CGI_FILE = '/path_to_cgi_dir/your.cgi';
var DEFAULT_ZOOM = 5;
var map;
var currentPoint;
// init は、HTML の onLoad から呼ばれるものとする。
function init() {
currentPoint = new GPoint(-122.13930130004883, 37.40248284497232);
map = new GMap(document.getElementById('map'));
GEvent.addListener(map, 'moveend', function() {
// add your code here
});
GEvent.addListener(map, 'click', function(o, p) {
// add your code here
});
GEvent.addListener(map, 'infowindowopen', function() {
// add your code here
});
GEvent.addListener(map, 'infowindowclose', function() {
// add your code here
});
map.setMapType(G_MAP_TYPE);
map.centerAndZoom(currentPoint, DEFAULT_ZOOM);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
}
function repaint(xml) {
var list_html = '';
if(xml) {
// IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
if(xml.documentElement) {
var path = xml.documentElement.getElementsByTagName('path');
var points = [];
for (var i = 0; i < path.length; i++) {
points.push(new GPoint( path[i].getAttribute('lng'),
path[i].getAttribute('lat')));
} // End of for
var route = xml.documentElement.getElementsByTagName('route');
list_html += route.length > 0 ? '<ol>' : '';
for (var i = 0; i < route.length; i++) {
list_html += '<li>' + route[i].getAttribute('description') + '</li>';
} // End of for
list_html += route.length > 0 ? '</ol>' : '';
}
}
// このスクリプトが呼ばれる HTML には、<div id="list"></div> があるとする。
document.getElementById('list').innerHTML = list_html;
map.addOverlay(new GPolyline(points));
}
// getPath メソッドは、マウスでボタンが押された、などのイベントに反応する
function getPath(lng, lat) {
currentPoint = new GPoint(lng, lat);
post( 'do=path'
+ '&toX=' + lng
+ '&toY=' + lat);
}
// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {
var xmlHttp = GXmlHttp.create();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
var xml = xmlHttp.responseXML;
repaint(xml);
}
}
xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data);
}
//]]>
トラックバック URL:
https://perltips.twinkle.cc/trackback/45