var map;

// 鍒涘缓鍜屽垵濮嬪寲鍦板浘鍑芥暟锛
function initMap() {
    createMap(); //鍒涘缓鍦板浘
    setMapEvent(); // 璁剧疆鍦板浘浜嬩欢
    addMapControl(); // 鍚戝湴鍥炬坊鍔犳帶浠
    addMapOverlay(); // 鍚戝湴鍥炬坊鍔犺鐩栫墿
}

function createMap() {
    map = new BMap.Map('map');
    map.centerAndZoom(new BMap.Point(lng, lat), zoom);
}

function setMapEvent() {
    map.enableScrollWheelZoom();
    map.enableKeyboard();
    map.enableDragging();
    map.enableDoubleClickZoom()
}

function addClickHandler(target, window) {
    target.addEventListener('click', function () {
        target.openInfoWindow(window);
    });
}

function addMapOverlay() {
    var markers = [{
        content: content,
        title: title,
        imageOffset: {
            width: 0,
            height: 3
        },
        position: {
            lat: lat,
            lng: lng
        }
    }];
    for (var index = 0; index < markers.length; index++) {
        var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
        var marker = new BMap.Marker(point, {
            icon: new BMap.Icon('http://api.map.baidu.com/lbsapi/createmap/images/icon.png', new BMap.Size(20, 24), { // 瀹氫綅icon瀹介珮
                imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
            })
        });

        var label = new BMap.Label(markers[index].title, {
            offset: new BMap.Size(20, -1) // 鑷畾涔夋枃鏈爣娉ㄧ浉瀵逛簬瀹氫綅icon鐨勫亸绉
        });

        // 鑷畾涔夋枃鏈爣娉ㄦ牱寮
        label.setStyle({
            color: '#fff', // 瀛椾綋棰滆壊
            backgroundColor: '#1e9249', // 鑳屾櫙棰滆壊
            borderColor: '#1e9249', // 杈规棰滆壊
            borderRadius: '3px', // 鍦嗚寮у害
            padding: '5px',
            fontSize: '12px', // 瀛椾綋澶у皬
            fontFamily: '寰蒋闆呴粦',
        });

        var opts = {
            width: 200,
            title: markers[index].title,
            enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
        marker.setLabel(label);
        addClickHandler(marker, infoWindow);
        map.addOverlay(marker);
    };
}

// 鍚戝湴鍥炬坊鍔犳帶浠
function addMapControl() {
    if (addScaleControl) {
        var scaleControl = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
    }

    if (addNavControl) {
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);
    }

    if (addOverviewControl) {
        var overviewControl = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: true
        });
        map.addControl(overviewControl);
    }
}

initMap();