JQuery Maps
Google Map应用在网站之上已经从单一的浏览性慢慢转化为服务概念（同时也大大增强用户体验度）
如下利用 Google Map Api ------ 简单实现地图网站应用。(仅参考)
实现目标：
1.在地图中进行地点标注
2.选择标注时，出现相关信息
3.点击页面上的测试按钮，显示相关的地点标注信息
Html Code:
<body >
<h1>Google Map</h1>
<div id="Googlemap" style="width: 70%; height: 480px; float: left; border: 1px solid black;">
</div>
<input type="button" id="btnTest" title="test" value="显示第二店信息" />
</body>
前期准备：
- 注册Google Api Key
- 引用Google Api 脚本
<script language="javascript" type="text/javascript" src=http://ditu.google.com/maps?file=api&v=2&key=XXX></script>
- 在地图中进行地点标注
如果要实现地点标注，首先要准备数据
数据如下：
var message = [
{ "X": "31.223822", "Y": "121.336311", "Content": { "Title": "别克4s店", "Context": "北翟路1571号"} },
{ "X": "31.175449", "Y": "121.395134", "Content": { "Title": "别克4s店", "Context": "虹梅路1601号"} },
{ "X": "31.095711", "Y": "121.456276", "Content": { "Title": "别克4s店", "Context": "龙吴路"} },
{ "X": "31.078356", "Y": "121.395607", "Content": { "Title": "别克4s店", "Context": "沪闵路"} },
{ "X": "31.200939", "Y": "121.365707", "Content": { "Title": "别克4s店", "Context": "哈密路1231号"} }
];
然后调用
addOverlay(overlay:GOverlay) 将叠加层添加到地图中，并触发 addoverlay 事件。
var point = new GLatLng(X, Y);
var newMkr = GMaps.prototype.CreateMarker(point, i);
map.addOverlay(newMkr);
- 选择标注时，出现相关信息
在标注点上显示相关信息，需要调用openInfoWindowHtml。
openInfoWindowHtml(content:String, opts?:GInfoWindowOptions)
通过标记图标打开地图信息窗口。信息窗口的内容为包含 HTML 文本的字符串。只适用于 GInfoWindowOptions.maxWidth 选项。
- 点击页面上的测试按钮，显示相关的地点标注信息
实现这点只需要定义一个Trigger即可
GEvent.trigger(XX, "click");
代码解析：（看看注释即可）
var message = [
{ "X": "31.223822", "Y": "121.336311", "Content": { "Title": "别克4s店", "Context": "北翟路1571号"} },
{ "X": "31.175449", "Y": "121.395134", "Content": { "Title": "别克4s店", "Context": "虹梅路1601号"} },
{ "X": "31.095711", "Y": "121.456276", "Content": { "Title": "别克4s店", "Context": "龙吴路"} },
{ "X": "31.078356", "Y": "121.395607", "Content": { "Title": "别克4s店", "Context": "沪闵路"} },
{ "X": "31.200939", "Y": "121.365707", "Content": { "Title": "别克4s店", "Context": "哈密路1231号"} }
];
var GMaps = function() {
};
GMaps.prototype = {
//定义标记容器
makers: [],
//定义鹰眼图标
SetIcon: function(index) {
var markerIcon = new GIcon();
markerIcon.image = "../Images/" + index + ".png";
return markerIcon;
},
//设置地图中心
SetCenter: function(lats, lngs) {
var maxLat = Math.max.apply(null, lats),
maxLng = Math.max.apply(null, lngs),
minLat = Math.min.apply(null, lats),
minLng = Math.min.apply(null, lngs),
lat = minLat + (maxLat - minLat) / 2,
lng = minLng + (maxLng - minLng) / 2,
//定义缩放率
bounds = new GLatLngBounds(new GLatLng(minLat, minLng), new GLatLng(maxLat, maxLng));
map.setCenter(new GLatLng(lat, lng), map.getBoundsZoomLevel(bounds));
},
//定义标记内容
CreateMarker: function(latlng, index) {
if (!latlng) return;
var marker = new GMarker(latlng, { icon: GMaps.prototype.SetIcon(index) });
marker.id = index;
GEvent.addListener(marker, "click", function() {
var myHtml = new Array();
myHtml.push("<span id=\"Info\">");
myHtml.push("<h2>" + message[index].Content.Title + "</h2><br />");
myHtml.push(message[index].Content.Context + "<br />");
myHtml.push("</span>");
map.openInfoWindowHtml(latlng, myHtml.join(''));
});
return marker;
},
//设置触发标记内容显示
TriggerMaker: function(maker) {
GEvent.trigger(maker, "click");
},
//创建地图
BuildMap: function(map) {
//判断当前浏览器是否支持google 地图
if (GBrowserIsCompatible()) {
//定义经纬度容器
var lats = [], lngs = [];
//从地图中删除所有叠加层
map.clearOverlays();
$.each(message, function(i) {
var point = new GLatLng(message[i].X, message[i].Y);
var newMkr = GMaps.prototype.CreateMarker(point, i);
if (newMkr) {
//存储当前Maker到Makers中，用于在地图之外进行选择
GMaps.prototype.makers.push(newMkr);
(function(map, newMkr) {
//将叠加层添加到地图中
map.addOverlay(newMkr);
})(map, newMkr);
}
//存储所有经纬度用于计算当前显示区域
lats.push(message[i].X);
lngs.push(message[i].Y);
});
//设置地图中心区域
GMaps.prototype.SetCenter(lats, lngs);
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.addControl(new GLargeMapControl())
map.addControl(new GOverviewMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
}
else {
alert("No Support Google Map");
}
}
}
最后调用代码：
var map = new GMap2(document.getElementById("Googlemap"));
var mapView = new GMaps();
mapView.BuildMap(map);
$(function() {
$("input[id=btnTest]").click(function() {
mapView.TriggerMaker(mapView.makers[1]);
if (document.documentElement.scrollTop > 250) document.documentElement.scrollTop = 170;
});
});
最终实现效果：
资源：
Google 地图 API 开发指南
待续 。。。。有关于Bing Maps的话题
