百度地圖API 簡單使用技巧一

根據官網的API，http://developer.baidu.com/map/jsdemo.htm#c1_2  

說說通過簡單幾步操作百度地圖：

一、當然是引用百度的API了

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=875b8fcac5071b8535fb39296739ba3b"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

建議把CSS也引用上，如果做提示框的時候有用得到的地方。如果用MVC可以直接在Layout中引用就可以了。

二、將當前城市設置爲地圖默認城市，這個相當有用

   var map = new BMap.Map("div_right");  //說明一下，這個DIV要比地圖先加載，不然會出現比較鬼異的情況。而且DIV的尺寸也要越早確定越好
        //設置當前默認城市
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
        function myFun(result) {
            var cityName = result.name;
            $("#span_City").html(cityName);  //頁面弄一個SPAN,用於顯示返回的城市名稱          
            map.centerAndZoom(cityName, 12);
        }
        map.enableDragging();//啓用地圖拖拽事件，默認啓用(可不寫)
        map.enableScrollWheelZoom();//啓用地圖滾輪放大縮小
        map.enableDoubleClickZoom();//啓用鼠標雙擊放大，默認啓用(可不寫)
        map.enableKeyboard();//啓用鍵盤上下左右鍵移動地圖

       //向地圖中添加縮放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地圖中添加縮略圖控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
        map.addControl(ctrl_ove);
        //向地圖中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);

說明：添加的控件可以自由選擇，不是必須的

三、自動完成，主要是對於當前所在的城市，自動完成應當以當前城市爲中心查詢。

由於做的項目可能頻繁切換城市，所以把其獨立出方法，在切換城市的時候調用方法

 var geoc = new BMap.Geocoder();  //這是必須的，可以在地圖首次加載時聲明，用得較多的其實

function SetLocationTipe() {
            var ac = null;
            ac = new BMap.Autocomplete(    //建立一個自動完成的對象
           {
               "input": "txt_Search"
           , "location": $("#span_City").html()
           });
            ac.setLocation($("#span_City").html());  //關鍵語句
            ac.addEventListener("onhighlight", function (e) {  //鼠標放在下拉列表上的事件
                var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province + _value.city + _value.district + _value.street + _value.business;
                }
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                $("#searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function (e) {    //鼠標點擊下拉列表後的事件
                var _value = e.item.value;
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
                $("#searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

                setPlace();
            });

            function setPlace() {
                map.clearOverlays();    //清除地圖上所有覆蓋物
                function myFun() {
                    var pp = local.getResults().getPoi(0).point;    //獲取第一個智能搜索的結果
                    geoc.getLocation(pp, function (rs) {
                        var addComp = rs.addressComponents;
                        $("#span_City").html(addComp.city);
                    });
                    map.centerAndZoom(pp, 15);
                    var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
                        offset: new BMap.Size(10, 25), // 指定定位位置  
                        imageOffset: new BMap.Size(0, 0 - 10 * 25)
                    }); // 設置圖片偏移)
                    var markerS = new BMap.Marker(pp, { icon: myIcon });  // 創建標註
                    map.addOverlay(markerS);             // 將標註添加到地圖中
                    markerS.enableDragging();
                    markerS.setAnimation(BMAP_ANIMATION_BOUNCE);
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                    onSearchComplete: myFun
                });
                local.search(myValue);
            }
        }