google map api与jquery结合使用(2) --标注,浮窗

打开信息浮窗

修改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!');
　　 }
});