• 巧用JQuery与Google Maps 地图结合


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

    实现目标:

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

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

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

    Html Code:

    1. <body >  
    2.     <h1>Google Map</h1>  
    3.     <div id="Googlemap" style=" 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

  • 相关阅读:
    JetBrains下载历史版本
    php入门笔记
    Ajax获取服务器信息
    Ubuntu上安装PHP环境-mysql+apache+php-Linux操作系统
    Ubuntu彻底删除/卸载mysql,php,apache
    轻松理解JS基本包装对象
    JS事件委托
    浅谈JS事件冒泡
    JS闭包那些事
    浅谈JS的变量提升
  • 原文地址:https://www.cnblogs.com/activities/p/2112444.html
Copyright © 2020-2023  润新知