zoukankan      html  css  js  c++  java

  • 巧用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
  • 相关阅读:
    CSS布局之盒子模型[二]
    CSS布局之盒子模型[一]
    CSS文本相关之垂直排列[5]
    网站迁移之后，中文路径都变成乱码
    Linux中shell搜索多文件中的字符串
    mysql数据库报错
    使用Flarum轻松搭建自己的论坛
    CSS雪碧图-html优化
    CSS-定位模式
    ul当做div标签的使用
  • 原文地址：https://www.cnblogs.com/activities/p/2112444.html
Copyright © 2011-2022 走看看