电脑技术学习

10分钟学会Google Map API (二)

dn001

这里是一个基于GMap2和XML的小例子,数据存在XML文件中 ,这是最简单的模式,却相当地有用。

实例的网址是:http://sunjian100.googlepages.com/MapTest.html

另外补充一点,到目前为止,GoogleMap这套平台对于中文字符还不是支持的很好。

下面是脚本方面的例子:


http://maps.google.com/maps?file=api&v=2&key=******" type="text/javascript">


// var points = [];
var markers = [];
var infoWindowHtml = [];
var sidebarHtml = "";

var redCircleIcon = new GIcon();
redCircleIcon.image = "RedCircle7x7.gif";
redCircleIcon.iconSize = new GSize(7, 7);
redCircleIcon.iconAnchor = new GPoint(3, 3);
redCircleIcon.infoWindowAnchor = new GPoint(3, 3);

function createBridgeMarker(ind, name, latitude, longitude) {
var marker;
points[ind] = new GLatLng(latitude, longitude);
marker = new GMarker(points[ind], redCircleIcon);
infoWindowHtml[ind] = "http://www.google.com/search?q=%22" + name + "%22" target="_blank">" + name + "";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(infoWindowHtml[ind]);
});
markers[ind] = marker;
sidebarHtml += "

" + name + "

";
return marker;
}

function markerSelected(ind) {
markers[ind].openInfoWindowHtml(infoWindowHtml[ind]);
}
http://bizhi.knowsky.com
function onLoad() {
// Creates a map and centers it on the Hot Metal Bridge in Pittsburgh.;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(40.6413,-74.1428), 11, G_NORMAL_MAP);

GDownloadUrl("Bridges.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var bridges = xml.documentElement.getElementsByTagName("bridge");
for (var i = 0; i < bridges.length; i++) {
var name = bridges[i].getAttribute("name");
var latitude = parseFloat(bridges[i].getAttribute("latitude"));
var longitude = parseFloat(bridges[i].getAttribute("longitude"));
var marker = createBridgeMarker(i, name, latitude, longitude)
map.addOverlay(marker);
}
document.getElementById("sidebar").innerHTML = sidebarHtml;
});
}
}

//]]>