map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else if (point) {
map.addOverlay(new GMarker(point));
}
});
在标记上显示消息窗口(Display Info windows Above Markers)
在这个示例中，我们通过监听对每个标记的单击事件来显示一个定义的消息窗口，我们使用了关闭窗口的功能来对每个窗口的内容进行用户化的定制。
// 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 given number
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;
}
// 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 1);
map.addOverlay(marker);
}
创建图标
创建一个新类型的图标，使用在Google Ride
Finder中的"mimi"标记作为例子。我们需要制定
这个图像的前景图像，阴影图像,以及我们想要将这些图标放在地图上的位置和和这些图标相对应的
信息窗口。
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow =
"http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// 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 one of our tiny markers at the given point
function createMarker(point) {
var marker = new GMarker(point, icon);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("You clicked me!");
});
}
// Place the icons randomly 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 ) {
createMarker(new GPoint(bounds.minX width * Math.random(),
bounds.minY height * Math.random()));
}
使用图标类(Using Icon Classes)
在很多种情况下，你的图标也许会有相同的前景色，但可能有不同的形状和阴影。最简单的达到
这种效果的方法是使用GIcon
类的拷贝，这些拷贝将你所要定义的图标属性都拷贝到一个你所定义的
新的图标上去。
// Create a base icon for all of our markers that specifies the shadow,
icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.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() {
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
