[JQuery]JQuery Maps

转载:http://www.cnblogs.com/RuiLei/archive/2009/11/25/1610163.html

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;
            });
        });

最终实现效果:

image

 

资源:

Google 地图 API 开发指南

 

待续  。。。。有关于Bing Maps的话题

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏