巧用JQuery与Google Maps 地图结合

如下利用 Google Map Api ------ 简单实现地图网站应用。(仅参考)

实现目标：

1.在地图中进行地点标注

2.选择标注时，出现相关信息

3.点击页面上的测试按钮，显示相关的地点标注信息

Html Code:

  1. <body >  
  2.     <h1>Google Map</h1>  
  3.     <div id="Googlemap" style="width: 70%; height: 480px; float: left; border: 1px solid black;">  
  4.     </div>  
  5.     <input type="button" id="btnTest" title="test" value="显示第二店信息" /> 
  6.   
  7. </body> 

前期准备：

注册Google Api Key
引用Google Api 脚本

  1. <script language="javascript" type="text/javascript" src=http://ditu.google.com/maps?file=api&v=2&key=XXX></script> 

在地图中进行地点标注
如果要实现地点标注，首先要准备数据

数据如下：

  1. var message = [  
  2.                          { "X": "31.223822", "Y": "121.336311", "Content": { "Title": "别克4s店", "Context": "北翟路1571号"} },  
  3.                          { "X": "31.175449", "Y": "121.395134", "Content": { "Title": "别克4s店", "Context": "虹梅路1601号"} },  
  4.                          { "X": "31.095711", "Y": "121.456276", "Content": { "Title": "别克4s店", "Context": "龙吴路"} },  
  5.                          { "X": "31.078356", "Y": "121.395607", "Content": { "Title": "别克4s店", "Context": "沪闵路"} },  
  6.                          { "X": "31.200939", "Y": "121.365707", "Content": { "Title": "别克4s店", "Context": "哈密路1231号"} }  
  7.                                      ];  

然后调用

addOverlay(overlay:GOverlay) 将叠加层添加到地图中，并触发 addoverlay 事件。

  1. var point = new GLatLng(X, Y);  
  2.                   var newMkr = GMaps.prototype.CreateMarker(point, i); 
  3.                   map.addOverlay(newMkr); 

选择标注时，出现相关信息
在标注点上显示相关信息，需要调用openInfoWindowHtml。

  1. openInfoWindowHtml(content:String, opts?:GInfoWindowOptions)  

通过标记图标打开地图信息窗口。信息窗口的内容为包含 HTML 文本的字符串。只适用于 GInfoWindowOptions.maxWidth 选项。


点击页面上的测试按钮，显示相关的地点标注信息
实现这点只需要定义一个Trigger即可

  1. GEvent.trigger(XX, "click"); 

代码解析：（看看注释即可）

  1. var message = [ 
  2.                            { "X": "31.223822", "Y": "121.336311", "Content": { "Title": "别克4s店", "Context": "北翟路1571号"} }, 
  3.                            { "X": "31.175449", "Y": "121.395134", "Content": { "Title": "别克4s店", "Context": "虹梅路1601号"} }, 
  4.                            { "X": "31.095711", "Y": "121.456276", "Content": { "Title": "别克4s店", "Context": "龙吴路"} }, 
  5.                            { "X": "31.078356", "Y": "121.395607", "Content": { "Title": "别克4s店", "Context": "沪闵路"} }, 
  6.                            { "X": "31.200939", "Y": "121.365707", "Content": { "Title": "别克4s店", "Context": "哈密路1231号"} } 
  7.                       ]; 
  8.   
  9.         var GMaps = function() { 
  10.         }; 
  11.   
  12.         GMaps.prototype = { 
  13.   
  14.             //定义标记容器 
  15.             makers: [], 
  16.   
  17.   
  18.             //定义鹰眼图标 
  19.             SetIcon: function(index) { 
  20.                 var markerIcon = new GIcon(); 
  21.                 markerIcon.image = "../Images/" + index + ".png"; 
  22.                 return markerIcon; 
  23.             }, 
  24.   
  25.             //设置地图中心 
  26.             SetCenter: function(lats, lngs) { 
  27.                 var maxLat = Math.max.apply(null, lats), 
  28.                 maxLng = Math.max.apply(null, lngs), 
  29.                 minLat = Math.min.apply(null, lats), 
  30.                 minLng = Math.min.apply(null, lngs), 
  31.                 lat = minLat + (maxLat - minLat) / 2, 
  32.                 lng = minLng + (maxLng - minLng) / 2, 
  33.                 //定义缩放率 
  34.                 bounds = new GLatLngBounds(new GLatLng(minLat, minLng), new GLatLng(maxLat, maxLng)); 
  35.                 map.setCenter(new GLatLng(lat, lng), map.getBoundsZoomLevel(bounds)); 
  36.             }, 
  37.   
  38.             //定义标记内容 
  39.             CreateMarker: function(latlng, index) { 
  40.                 if (!latlng) return; 
  41.                 var marker = new GMarker(latlng, { icon: GMaps.prototype.SetIcon(index) }); 
  42.                 marker.id = index; 
  43.   
  44.                 GEvent.addListener(marker, "click", function() { 
  45.                     var myHtml = new Array(); 
  46.                     myHtml.push("<span id=\"Info\">"); 
  47.                     myHtml.push("<h2>" + message[index].Content.Title + "</h2><br />"); 
  48.                     myHtml.push(message[index].Content.Context + "<br />"); 
  49.                     myHtml.push("</span>"); 
  50.                     map.openInfoWindowHtml(latlng, myHtml.join('')); 
  51.                 }); 
  52.   
  53.                 return marker; 
  54.             }, 
  55.   
  56.             //设置触发标记内容显示 
  57.             TriggerMaker: function(maker) { 
  58.                 GEvent.trigger(maker, "click"); 
  59.             }, 
  60.   
  61.             //创建地图 
  62.             BuildMap: function(map) { 
  63.                 //判断当前浏览器是否支持google 地图 
  64.                 if (GBrowserIsCompatible()) { 
  65.                     //定义经纬度容器 
  66.                     var lats = [], lngs = []; 
  67.   
  68.                     //从地图中删除所有叠加层 
  69.                     map.clearOverlays(); 
  70.   
  71.                     $.each(message, function(i) { 
  72.   
  73.                         var point = new GLatLng(message[i].X, message[i].Y); 
  74.                         var newMkr = GMaps.prototype.CreateMarker(point, i); 
  75.                         if (newMkr) { 
  76.                             //存储当前Maker到Makers中，用于在地图之外进行选择 
  77.                             GMaps.prototype.makers.push(newMkr); 
  78.                             (function(map, newMkr) { 
  79.                                     //将叠加层添加到地图中 
  80.                                     map.addOverlay(newMkr); 
  81.   
  82.                             })(map, newMkr); 
  83.                         } 
  84.                         //存储所有经纬度用于计算当前显示区域 
  85.                         lats.push(message[i].X); 
  86.                         lngs.push(message[i].Y); 
  87.                     }); 
  88.   
  89.                     //设置地图中心区域 
  90.                     GMaps.prototype.SetCenter(lats, lngs); 
  91.   
  92.                     map.enableDoubleClickZoom(); 
  93.                     map.enableScrollWheelZoom(); 
  94.                     map.enableContinuousZoom(); 
  95.   
  96.                     map.addControl(new GLargeMapControl()) 
  97.                     map.addControl(new GOverviewMapControl()); 
  98.                     map.addControl(new GScaleControl()); 
  99.                     map.addControl(new GMapTypeControl()); 
  100.                 } 
  101.                 else { 
  102.                     alert("No Support Google Map"); 
  103.                 } 
  104.             } 
  105.         } 

最后调用代码：

  1. var map = new GMap2(document.getElementById("Googlemap")); 
  2.   
  3.         var mapView = new GMaps(); 
  4.   
  5.         mapView.BuildMap(map); 
  6.   
  7.         $(function() { 
  8.   
  9.             $("input[id=btnTest]").click(function() { 
  10.                 mapView.TriggerMaker(mapView.makers[1]); 
  11.                 if (document.documentElement.scrollTop > 250) document.documentElement.scrollTop = 170; 
  12.             }); 
  13.         }); 

最终实现效果：

最终实现效果：

 

Google 地图 API 开发指南
http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html

 

转自: http://www.aspxcs.net/HTML/1227231018.html

 

www.aitaowang8.com

posted @ 2011-07-21 10:14  jake2011  阅读(713)  评论(0)  编辑  收藏  举报