JQuery Maps

Google Map应用在网站之上已经从单一的浏览性慢慢转化为服务概念（同时也大大增强用户体验度）

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

实现目标：

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

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

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

Html Code:

<body >

    <h1>Google Map</h1>

    <div id="Googlemap" style=" 70%; height: 480px; float: left; border: 1px solid black;">

    </div>

    <input type="button" id="btnTest" title="test" value="显示第二店信息" />

</body>

前期准备：

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

});

});

最终实现效果：

资源：

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