前一篇：
[javascript]google map api 與jquery結合使用(1)
打開信息浮窗
修改javascript代碼：
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開啟滾輪伸縮效果－－鼠標滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//打開信息浮窗--需要在設置地圖中心點后進行
map.openInfoWindow(map.getCenter(),document.createTextNode("你好，中國"));
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
在地圖的中央會顯示信息浮窗（相對粗糙）
信息浮窗效果圖
地圖標注
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開啟滾輪伸縮效果－－鼠標滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//在地圖上添加10個位置隨機的標記
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
//隨機取五個點連成折線，5個點按照經度排序防止折線自身交叉.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
//單擊事件句柄
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
此時可以在地圖中看到10個標注和一條折線，由于是隨機生成的，所以位置不是固定。
隨機的地圖標注和折線效果圖
在標記上顯示信息浮窗
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開啟滾輪伸縮效果－－鼠標滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//在指定點以指定標簽創建標記
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}
//添加10個位置隨機的標記
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
在標記上面顯示信息浮窗的效果
分標簽的信息浮窗
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開啟滾輪伸縮效果－－鼠標滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//信息浮窗內容
var infoTabs = [
new GInfoWindowTab("氣候", "華北地區氣候不錯"),
new GInfoWindowTab("天氣", "冷空氣南下，可能降雪。")
];
//在地圖的中心添加一個標記并自動打開其信息浮窗
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
此時的浮窗是分標簽的
分標簽的信息浮窗
后一篇：
[javascript]google map api 與jquery結合使用(3) --圖標樣式,使用xml和異步請求
Let life be beautiful like summer flowers and death like autumn leaves.