百度地图WebAPI

可以点 这里 查看效果

首先要去百度地图开放平台 申请为百度开发者，然后得到服务秘钥(ak)
WEB服务API: http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi

这里还有JS代码和html页面代码的示例: http://lbsyun.baidu.com/jsdemo.htm#i1_1

有了这两个文档和示例，我们就可以开始我们的开发了。
直接上代码

@*地图模块*@
<script type="text/javascript">

    $(function () {
        var city = "成都市西南交大";
        var addr = $(".map-content").attr("name");
        var map, latitude, longitute;
        var MapTitleId     //地图面板ID
        var keyword ="交通";        //一级面板查询字
        var subKeyword = "地铁站"     //二级面板查询字
        var iconURL = "";
        var pointArray = new Array();        //周边点经纬度Point对象数组
        var ServiceArray = new Array();      //周边点详细信息
        //var DistanceArr = new Array();       //周边点到中心点距离
        function initMap() {
            //createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
            addMapOverlay();//向地图添加覆盖物
        }
        function setMapEvent() {
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            map.enableDragging();
            map.enableDoubleClickZoom()
        }
        function addClickHandler(target, window) {
            target.addEventListener("click", function () {
                target.openInfoWindow(window);
            });
        }
        function addMapOverlay() {
        }
        //向地图添加控件
        function addMapControl() {
            var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
            var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: 0 });
            map.addControl(navControl);
        }

        // 复杂的自定义覆盖物
        function ComplexCustomOverlay(point, text, mouseoverText) {
            this._point = point;
            this._text = text;
            this._overText = mouseoverText;
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.position = "absolute";
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
            div.style.backgroundColor = "#EE5D5B";
            div.style.border = "1px solid #BC3B3A";
            div.style.color = "white";
            div.style.height = "33px";
            div.style.padding = "2px";
            div.style.lineHeight = "28px";
            div.style.whiteSpace = "nowrap";
            div.style.MozUserSelect = "none";
            div.style.fontSize = "16px"
            var span = this._span = document.createElement("span");
            div.appendChild(span);
            span.appendChild(document.createTextNode(this._text));
            var that = this;

            var arrow = this._arrow = document.createElement("div");
            arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
            arrow.style.position = "absolute";
            arrow.style.width = "11px";
            arrow.style.height = "10px";
            arrow.style.top = "32px";
            arrow.style.left = "35px";
            arrow.style.overflow = "hidden";
            div.appendChild(arrow);

            div.onmouseover = function () {
                this.style.backgroundColor = "#6BADCA";
                this.style.borderColor = "#0000ff";
                this.getElementsByTagName("span")[0].innerHTML = that._overText;
                arrow.style.backgroundPosition = "0px -20px";
            }

            div.onmouseout = function () {
                this.style.backgroundColor = "#EE5D5B";
                this.style.borderColor = "#BC3B3A";
                this.getElementsByTagName("span")[0].innerHTML = that._text;
                arrow.style.backgroundPosition = "0px 0px";
            }

            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 30 + "px";
        }
        var txt = addr, mouseoverTxt = txt + " " + parseInt(Math.random() * 1000, 10) + "套";

        //获取覆盖物位置
        function attribute(e) {
            var p = e.target;
            alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
        }

     

        //地图面板点击事件 第一级
        $(".aroundType li").click(function () {
            $(".aroundType li").each(function (index, item) {
                $(this).attr("class", "LOGCLICK");
            })
            $(".itemTagBox").each(function (index, item) {
                $(this).attr("style", "display:none");
            })
            $(this).attr("class", "LOGCLICK selectTag");
            MapTitleId = $(this).attr('data-bl');
            $("#" + MapTitleId).attr("style", "");

            keyword = $(this).text();  //一级选择   
            //alert(MapTitleId);
            //每个一级标签下第一个二级标签被点击
            var s = "#" + MapTitleId + " div:first";
            $(s).click();

        })
       

        //起始设置交通地铁站
        //$('.aroundType li:first').click();


        //地图点击事件  第二级
        $("#traffic div").click(function () {
            $("#" + MapTitleId + " div").each(function (index, item) {
                $(this).attr("class", "tagStyle LOGCLICK");
            })
            $(this).attr("class", "tagStyle LOGCLICK select");
            subKeyword = $(this).text();   //二级选择
            searchData(keyword + subKeyword);
           
        })
        $("#education div").click(function () {           
            $("#" + MapTitleId + " div").each(function (index, item) {
                $(this).attr("class", "tagStyle LOGCLICK");
            })
            $(this).attr("class", "tagStyle LOGCLICK select");
            subKeyword = $(this).text();   //二级选择
            searchData(keyword + subKeyword);            
          
        })
        $("#medical div").click(function () {
            $("#" + MapTitleId + " div").each(function (index, item) {
                $(this).attr("class", "tagStyle LOGCLICK");
            })
            $(this).attr("class", "tagStyle LOGCLICK select");
            subKeyword = $(this).text();   //二级选择
            searchData(keyword + subKeyword);
         
        })
        $("#shopping div").click(function () {
            $("#" + MapTitleId + " div").each(function (index, item) {
                $(this).attr("class", "tagStyle LOGCLICK");
            })
            $(this).attr("class", "tagStyle LOGCLICK select");
            subKeyword = $(this).text();   //二级选择
            searchData(keyword + subKeyword);
           
        })
        $("#life div").click(function () {
            $("#" + MapTitleId + " div").each(function (index, item) {
                $(this).attr("class", "tagStyle LOGCLICK");
            })
            $(this).attr("class", "tagStyle LOGCLICK select");
            subKeyword = $(this).text();   //二级选择
            searchData(keyword + subKeyword);
           
        })
        $("#entertainment div").click(function () {
            $("#" + MapTitleId + " div").each(function (index, item) {
                $(this).attr("class", "tagStyle LOGCLICK");
            })
            $(this).attr("class", "tagStyle LOGCLICK select");
            subKeyword = $(this).text();   //二级选择
            searchData(keyword + subKeyword);
            
        })
  

        //根据一二级关键字请求百度API
        function searchData(key) {
            $.ajax({
                url: "http://api.map.baidu.com/geocoder/v2/",
                dataType: "jsonp",
                type: "get",
                async:false,
                data: { address: addr, output: "json", ak: "你的ak" },
                success: function (data) {
                    //alert(addr);
                    longitute = data.result.location.lng.toString();
                    latitude = data.result.location.lat.toString();
                    // 百度地图API功能
                    //alert(latitude + "," + longitute);
                    map = new BMap.Map("map-box-left");            // 创建Map实例
                    initMap();
                   

                    var new_point = new BMap.Point(longitute, latitude);
                    map.centerAndZoom(new_point, 16);   //参数调整比例
                    map.enableScrollWheelZoom();
                    //var marker = new BMap.Marker(new_point);  // 创建标注
                    //map.addOverlay(marker);              // 将标注添加到地图中
                    //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                    //自定义标注
                    var myCompOverlay = new ComplexCustomOverlay(new_point, addr, mouseoverTxt);
                    map.addOverlay(myCompOverlay);
                    //map.panTo(new_point);

                    //添加周边点
                    addPoint(longitute, latitude, key);
                },
                error: function (data) {
                    alert("检查网络和地址是否正确！");
                }
            });
        }

        //添加周边点
        function addPoint(longitute, latitude, keyword) {
            $.ajax({
                url: "http://api.map.baidu.com/place/v2/search",
                dataType: "jsonp",
                type: "get",
                async: false,
                data: { query: keyword, location: latitude + "," + longitute, radius: 2000,scope:2,filter:"sort_name:distance|sort_rule:1", output: "json", ak: "9pwN0orTUYNywM8HBvFC9qSgGpIGHtKO" },
                success: function (data) {                     
                    ServiceArray = data.results;
                    //周边点到中心点距离
                    showService(ServiceArray);
                    //遍历周边
                    for (var i = 0; i < data.results.length; i++) {
                        var address = data.results.address;
                        var lat = data.results[i].location.lat.toString();
                        var lng = data.results[i].location.lng.toString();
                        var name = data.results[i].name;
                        //console.log(lat + "," + lng);
                        //创建图标
                        pointArray[i] = new BMap.Point(lng, lat);
                        //var marker = new BMap.Marker(pt);  // 创建标注
                        //map.addOverlay(marker);              // 将标注添加到地图中

                        //自定义图标
                        //var myIcon = new BMap.Icon("/imgs/mapIconBlue@1x.png", new BMap.Size(24, 32));
                        var iconURL = "/imgs/" + MapTitleId + ".png";
                        var myIcon = new BMap.Icon(iconURL, new BMap.Size(24, 32));
                        //var myIcon = BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300, 157));
                        var marker = new BMap.Marker(pointArray[i], { icon: myIcon });  // 创建标注
                        map.addOverlay(marker);    //增加点
                        marker.addEventListener("click", attribute);   //添加点击事件
                    }
                    showList(ServiceArray);
                    //map.setViewport(pointArray);                //让所有点在视野范围内
                },
                error: function (data) {
                    alert("检查网络和地址是否正确！");
                }
            });
            
        }
        function showList(ServiceArray)
        {
            
            var listStr = "";
            $('.itemBox li').remove();           
            //alert("showList"+ServiceArray.length)           
            for(var i = 0;i < ServiceArray.length;i++ )
            {
                name = ServiceArray[i].name;
                addrSub = ServiceArray[i].address;
                distance = ServiceArray[i].detail_info.distance+"米";
 
                listStr = listStr + '<li ><div class="contentBox"><div class="itemContent"> <span class="icon-park"></span><span class="itemText itemTitle">' + name + '</span><span class="icon-distance"></span><span class="itemText itemdistance">' + distance + '</span></div><div class="itemInfo">' + addrSub + '</div></div></li>';
            }
            $(".itemBox").append(listStr);
        }
        function showService(ServiceArray) {
            console.log(ServiceArray);
        }

     
        $("#traffic_panel").click();
        document.getElementById("resold").style.color = "#F44336";
    })

</script>