JS面向對象編程，對象，屬性，方法。

document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>');
function citymap(markerArr, cityName){
    this.markerArr = markerArr;
    this.cityName  = cityName;
    this.initMap = function() {
        this.createMap();//建立地圖
        this.setMapEvent();//設置地圖事件
        this.addMapControl();//向地圖添加控件
    };
    this.createMap = function() {
        var map = new BMap.Map("dituContent");//在百度地圖容器中建立一個地圖
        map.centerAndZoom(cityName,'13');

        window.map = map;//將map變量存儲在全局

        // 繪製點
        var marker = [];
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].baidu_lng;
            var p1 = markerArr[i].baidu_lat;
            marker[markerArr[i].id] = this.addMarker(new window.BMap.Point(p0, p1),markerArr[i],i );
            this.addInfoWindow(marker[markerArr[i].id], markerArr[i], i);
        }

        window.marker = marker;//將marker變量存儲在全局
    };
    this.addMarker = function(point,pro,index) {
        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 - index * 25)
            });
        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        map.addOverlay(marker);
        var label = new BMap.Label(pro.name,{offset:new BMap.Size(20,-10)});
        // 設置label樣式
        label.setStyle({ 
            color : "#CC3333", 
            fontSize : "13px", 
            backgroundColor :"#CCFFFF",
            border :"0", 
            fontWeight :"bold" 
        });
        marker.setLabel(label);
        return marker;
    };

    this.addInfoWindow = function(marker,pro) {
        //pop彈窗標題  
        var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></div>';
        //pop彈窗信息  
        var html = [];
        html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
        html.push('<tr>');
        html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
        html.push('<td style="vertical-align:top;line-height:16px">' + pro.address + ' </td>');
        html.push('</tr>');
        html.push('</tbody></table>');
        var infoWindow = new BMap.InfoWindow(html.join(""), {
            title: title,
            width: 200
        });

        var openInfoWinFun = function() {
            marker.openInfoWindow(infoWindow);
        };
        marker.addEventListener("click", openInfoWinFun);
        return openInfoWinFun;
    }

    this.setMapEvent = function() {
        map.enableDragging();//啓用地圖拖拽事件，默認啓用(可不寫)
        // map.enableScrollWheelZoom();//啓用地圖滾輪放大縮小
        map.enableDoubleClickZoom();//啓用鼠標雙擊放大，默認啓用(可不寫)
        map.enableKeyboard();//啓用鍵盤上下左右鍵移動地圖
    };
    this.addMapControl = function() {
        //向地圖中添加縮放控件
        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);
    };
    
    this.initMap();
    this.map = map;      // 設置地圖屬性
    this.marker = marker; // 設置marker屬性
    return this; // 返回構造函數
}

citymap是一個js的構造類
它有重要的map屬性，和marker屬性，
最後返回的this很重要。
經過這個返回，才能調用屬性和方法。

var products_json = {$products_json};
// 百度地圖
var citymap = new citymap(products_json,'宿遷');

function setAnimation(target) {
    var id  = $(target).data('id');
    var target_marker = citymap.marker[id];
    target_marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}

function setNull(target) {
    var id  = $(target).data('id');
    var target_marker = citymap.marker[id];
    target_marker.setAnimation(null);
}

經過citymap對象，調用marker屬性。
marker實際上是marker類的對象，經過它就能調用setAnimation方法了。很巧妙！

JS面向對象編程，全局變量，局部變量。
對象，對象屬性，對象方法。
返回值。
等等。
很是接近後端語言。

面向對象編程，函數式編程。

1.左邊的產品，對應右邊有一個marker對象。它們經過id關聯起來。

2.點擊左邊的產品，獲取id，經過citymap的屬性marker就能夠操做地圖右邊的marker標記了。可讓它跳動起來。

3.產品圖和地圖標記可以很好的互動起來了。

4.JS對象起到了橋樑的做用。