前一篇：
[javascript]google map api 與jquery結(jié)合使用(1)
打開(kāi)信息浮窗
修改javascript代碼：
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開(kāi)啟滾輪伸縮效果－－鼠標(biāo)滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//打開(kāi)信息浮窗--需要在設(shè)置地圖中心點(diǎn)后進(jìn)行
map.openInfoWindow(map.getCenter(),document.createTextNode("你好，中國(guó)"));
$(window).unload(function (){
$('.').unbind();
GUnload();
});
}else
{
alert('你使用的瀏覽器不支持 Google Map!');
}
});
在地圖的中央會(huì)顯示信息浮窗（相對(duì)粗糙）
信息浮窗效果圖
地圖標(biāo)注
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開(kāi)啟滾輪伸縮效果－－鼠標(biāo)滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//在地圖上添加10個(gè)位置隨機(jī)的標(biāo)記
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));
}
//隨機(jī)取五個(gè)點(diǎn)連成折線，5個(gè)點(diǎn)按照經(jīng)度排序防止折線自身交叉.
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!');
}
});
此時(shí)可以在地圖中看到10個(gè)標(biāo)注和一條折線，由于是隨機(jī)生成的，所以位置不是固定。
隨機(jī)的地圖標(biāo)注和折線效果圖
在標(biāo)記上顯示信息浮窗
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開(kāi)啟滾輪伸縮效果－－鼠標(biāo)滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//在指定點(diǎn)以指定標(biāo)簽創(chuàng)建標(biāo)記
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}
//添加10個(gè)位置隨機(jī)的標(biāo)記
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!');
}
});
在標(biāo)記上面顯示信息浮窗的效果
分標(biāo)簽的信息浮窗
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//開(kāi)啟滾輪伸縮效果－－鼠標(biāo)滾輪向前滾放大地圖，反之縮小
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(36.94,106.08),4);
//信息浮窗內(nèi)容
var infoTabs = [
new GInfoWindowTab("氣候", "華北地區(qū)氣候不錯(cuò)"),
new GInfoWindowTab("天氣", "冷空氣南下，可能降雪。")
];
//在地圖的中心添加一個(gè)標(biāo)記并自動(dòng)打開(kāi)其信息浮窗
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!');
}
});
此時(shí)的浮窗是分標(biāo)簽的
分標(biāo)簽的信息浮窗
后一篇：
[javascript]google map api 與jquery結(jié)合使用(3) --圖標(biāo)樣式,使用xml和異步請(qǐng)求
Let life be beautiful like summer flowers and death like autumn leaves.