jQuery+google weather API轻松实现天气地图（一）

乱七八糟

这里我使用的是MapBar的地图API，其他的如：Google 就不做说明了～方法类似～截图如下：

现在把全部代码放出，希望大家拍砖：
PS：关于各个城市的经纬度数据，请阅览：http://js8.in/285.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>天气地图-Design BY WYQ</title>       

<script type="text/javascript" src="http://union.mapbar.com/apis/maps/free?f=mapi&=31&k=aCW9cItqL6d6dy5yZh0qbH4ebnTzNYlrOHTrEeJyMYF4OYP6MhMyEl==@NFHEObaLbHEbecNFA5="></script>  <!–mapbar的地图API js地址–>

        <script type="text/javascript"  src="jquery.js"></script>
       

        <script type="text/javascript">
            var maplet = null;
            var oo = true;//打开关闭鹰眼 true打开
            var mw=true;//打开关闭鼠标滚轮使用 true打开
            avBubble.height=320;
            var marker;
            function initMap(){
                maplet = new Maplet("mapbar"); //在id=mapbar的DOM中创造map
                maplet.centerAndZoom(new MPoint(‘青岛市’), 6);//定义中心点
                maplet.addControl(new MStandardControl());//打开鱼骨架
                maplet.showScale(true);//打开比例尺
            }
            $(document).ready(function(){
                initMap();

                

                $("#button").click(function(){
                    so($("#city").val());
                    return false;
                });
                $("#post").click(function(){
                    post();
                    return false;
                });
            });
            function so(city){
                //alert(city);
                if(city==""){

                    alert("请填写搜索内容");
                    $("#city").focus();
                }else{
                    $.ajax({
                        type: "GET",
                        url: "mysql.php",
                        data: "city="+city,
                        beforeSend:function(){
                            $("#loading").show();
                        },
                        success: function(msg){
                            var msg = eval(‘(‘+msg+’)’);
                            if(msg.yes){
                                var info = new MInfoWindow("<b>"+city+"的天气情况：</b>","<div><img src="+msg.icon+"  style=’float:right;margin-right:120px;’ /><font color=red>"+msg.today+"</font><br/>温度："+msg.ssd+"<br/>湿度"+msg.sd+"<br/>风向："+msg.fx+"</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>"+msg.week1+"—"+msg.week1tianqi+"</font><img src="+msg.week1icon+" width=22px height=22px  /><br/>&nbsp;&nbsp;&nbsp;&nbsp;温度："+msg.week1zuidi+"~"+msg.week1zuigao+"<br/>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>"+msg.week2+"—"+msg.week2tianqi+"</font><img src="+msg.week2icon+" width=22px height=22px  /><br/>&nbsp;&nbsp;&nbsp;&nbsp;温度："+msg.week2zuidi+"~"+msg.week2zuigao+"<br/>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>"+msg.week3+"—"+msg.week3tianqi+"</font><img src="+msg.week3icon+" width=22px height=22px  /><br/>&nbsp;&nbsp;&nbsp;&nbsp;温度："+msg.week3zuidi+"~"+msg.week3zuigao+"<br/>");
                                marker=new MMarker(
                                new MPoint(msg.nlatlon),
                                new MIcon(msg.icon,20,20),
                                info
                            );
                                maplet.addOverlay(marker);
                                marker.openInfoWindow();
                                $("#loading").hide();
                            }else{
                                $("#loading").hide();
                                alert(msg.noCity);
                            }
                        }
                    });
                }
            }
       &

nbsp;    function post(){
                if($("#pCity").val()==""){
                    alert("请填写城市");
                    $("#pCity").focus();
                }else if($("#weidu").val()==""){
                    alert("请正确填写纬度值");
                    $("#weidu").focus();
                }else if($("#jingdu").val()==""){
                    alert("请正确填写经度值");
                    $("#jingdu").focus();
                }else{
                    $.ajax({
                        type: "POST",
                        url: "add.php",
                        data: "city="+$("#pCity").val()+"&weidu="+$("#weidu").val()+"&jingdu="+$("#jingdu").val(),
                        beforeSend: function(){
                            $("#loading").show();
                        },
                        success: function(msg){
                            alert( msg );
                        }
                    });
                }

            }
        </script>
        <style>
            #map{
                width:900px;
                margin:0 auto;
            }
            #mapbar{

                float:left;
            }
            #add{
                width:200px;
                height:450px;
                float:right;
            }
            .c{
                clear:both;
                height:0;

            }
            #loading{
                display:none;
                z-index:10000000;
            }
        </style>
    </head>
    <body >
        <div id="ctrl" style="height:30px;margin-top:3px;margin:0 auto;">
            <form action="">
                <input type="text" name="city" id="city" value="请输入城市名称，如：“青岛”" size=25 onfocus="value=’’"  onblur=if(!value)value=defaultValue />
                <input type="submit" name="button" id="button" value="天气搜索"   />
            </form><div id="loading" ><img scr=’loading.gif’/>正在加载天气信息……</div>
        </div>
        <div id="map">
            <div id="mapbar" style="width:700px;height:450px;"></div>          
        </div>
      
    </body>
</html>