类的拷贝,这些拷贝将你所要定义的图标属性都拷贝到一个你所定义的
新的图标上去。
// Create a base icon for all of our markers that specifies the shadow,
icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "/UploadFile/200803/18/06173324959.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
// Creates a marker whose info window displays the letter corresponding
to
// the given index
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class from
above
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = new GIcon(baseIcon);
icon.image = "http://www.google.com/mapfiles/marker" + letter +
".png";
var marker = new GMarker(point, icon);
// Show this marker‘s index in the info window when it is clicked
var html = "Marker <b>" + letter + "</b>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Add 10 random markers in the map viewport
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);
map.addOverlay(marker);
}
在地图上使用XML和异步远程方法调用Using XML and
Asynchronous RPC(‘AJAX‘)
在这个例子中,我们下载了一个静态文件"data.xml",这个文件包含有一系列以XML存储的经纬度坐标。当下载完成后,我们解析这个XML文件并在每个经­-纬度交汇处,创建一个图标。
// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>
var request = GXmlHttp.create();
request.open("GET", "data.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new
GPoint(parseFloat(markers[i].getAttribute("lng")),
parseFloat(markers[i].getAttribute("lat")));
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
}
request.send(null);
API 总览
GMap 类
GMap类的一个实例代表网页上的一个简单的地图。你可以为这个实例创建很多实例(这个网页上有多少地图,你就可以创建多少个)。一个地图被包含再一个容器中,­-一般来说是一个DIV元素。如果你没有明确地指出地图的尺寸,地图将会使用容器的大小来决定其大小。
GMap类提供一些方法来控制地图的空间位置(指定中心和缩放程度)和在地图上添加和移








