【IT168 技术文档】前几天玩了玩Google的Map API，感觉还不错，很简单。但凡有过任何编程经验的同学，看完以下的教程，都可以在10分钟内掌握它的主要功能。另外我还做了个简单的小例子，有兴趣的话，请参见http://sunjian100.googlepages.com/map.html ：]
第一步：
去http://www.google.com/apis/maps/signup.html 申请一个KeyID
第二步：
在HTML的<title></title>之间加上对MapAPI函数库的引用，
<script. src="http://maps.google.com/maps?file=api&v=2&key= YourKeyID" type="text/javascript"></script>
第三步：
在HTML的<body></body>之间的任意位置加上一个名为map的DIV，
<div id="map" style="width: 700px; height: 560px" align="center"></div>
第四步：
在名为map的DIV后面，加上GMap类的实例，
<script. type="text/javascript">
//创建GMap类的实例
var map = new GMap(document.getElementById("map");
//添加一个控制条
map.addControl(new GSmallMapControl());
//设置显示模式为卫星影像
map.setMapType(G_SATELLITE_TYPE);
//设置中心点经纬度（上海）和缩放系数，并显示
map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);
</script>
第五步：
随机增加10个标记点，
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
var point = new GPoint(bounds.minX + width * Math.random(),
bounds.minY + height * Math.random());
var marker = createMarker(point, i + 1);
//添加标记点
map.addOverlay(marker);
}
第六步：
添加事件响应，
function createMarker(point, number)
{
var marker = new GMarker(point);
// Show this marker's index in the info window when it is clicked.
var html = "Marker #<b>" + number + "</b>";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);});
return marker;
}
这里是一个基于GMap2和XML的小例子，数据存在XML文件中 ，这是最简单的模式，却相当地有用。
实例的网址是：http://sunjian100.googlepages.com/MapTest.html
另外补充一点，到目前为止，GoogleMap这套平台对于中文字符还不是支持的很好。
下面是脚本方面的例子：
<script. src="http://maps.google.com/maps?file=api&v=2&key=******" type="text/javascript"></script>
<script. type="text/javascript">
//<![CDATA[
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] = "<a href="http://www.google.com/search?q=%22" + name + "%22" target="_blank">" + name + "</a>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(infoWindowHtml[ind]);
});
markers[ind] = marker;
sidebarHtml += "<p><a href="javascript.:void(0)" nclick="markerSelected(" + ind + "">" + name + "</a></p>";
return marker;
}
function markerSelected(ind) {
markers[ind].openInfoWindowHtml(infoWindowHtml[ind]);
}
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.142, 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.getAttribute("name";
var latitude = parseFloat(bridges.getAttribute("latitude");
var longitude = parseFloat(bridges.getAttribute("longitude");
var marker = createBridgeMarker(i, name, latitude, longitude)
map.addOverlay(marker);
}
document.getElementById("sidebar".innerHTML = sidebarHtml;
});
}
}
//]]>
</script>
