bmap-helper

https://shuizhongxiong.github.io/bmap-helper/demo

setTheme
setMapInfo
setZoomControl
setZoomInControl
setZoomOutControl
setFullControl
setCustomCover
setCustomControl

api ak

<script src="http://api.map.baidu.com/api?v=3.0&ak=ak"></script>
<script src="../build/bmap-helper.js"></script>

<link rel="stylesheet" href="../build/bmap-helper.css">

theme-1theme-2

<script src="../build/bmap-theme.js"></script>

demo

<!--  -->
<div class="bmap-container" id="bmapContainer"></div>
<!--  -->
<div class="bmap-info" id="bmapInfo"></div>

var map = new BMap.Map('bmapContainer');
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

var helper = bmapHelper.initHelper({
    map: map, 
    imgPath: '../build/images/'
});

helper
bmap-container``bmap-info

setTheme

/**
 * 
 * @param {string} key 
 */
helper.setTheme(BMapThemes['theme-1']);

setMapInfo

/**
 * 
 * @param {BMap Marker} data.bmapMarker  marker
 * @param {HTMLElememt} data.infoEl 
 * @param {{x: number, y: number}} data.infoOffset  {x:0, y:0}
 * @param {string} data.infoHTML  info-content 
 * @param {boolean} data.isInfoCenter  infoOffset  false
 * @param {function} data.showCallback 
 * @param {any} data.showCallbackData 
 * @param {function} data.hideCallback 
 * @param {any} data.hideCallbackData 
 */
helper.setMapInfo({
    originEl: marker,
    infoEl: document.getElementById('bmapInfo'),
    infoHTML: '<div class="info-content">' +
        '<p></p>' +
        '<p>116.404, 39.915</p>' +
    '</div>',
    isInfoCenter: true
});

setZoomOutControl

/**
 * 
 * @param {ControlAnchor} data.anchor BMAP_ANCHOR_TOP_RIGHT
 * @param {{x: number, y: number}} data.offset {x: 20, y: 20}
 * @param {string} data.imgPath 
 * @param {string} data.divHtml 
 */
helper.setZoomOutControl();

setZoomInControl

/**
 * 
 * @param {ControlAnchor} data.anchor BMAP_ANCHOR_TOP_RIGHT
 * @param {{x: number, y: number}} data.offset {x: 20, y: 51}
 * @param {string} data.imgPath 
 * @param {string} data.divHtml 
 */
helper.setZoomInControl();

setFullControl

body``bmap-fullScreen
full-show
full-hide
full-hide-width
full-hide-height

/**
 * 
 * @param {ControlAnchor} data.anchor BMAP_ANCHOR_TOP_RIGHT
 * @param {{x: number, y: number}} data.offset {x: 20, y: 89}
 * @param {[string, string]} data.imgPath []
 * @param {[string, string]} data.divHtml []
 * @param {boolean} data.isAutoCenter 
 * @param {function} callback 
 */
helper.setFullControl();

setCustomCover

/**
 * 
 * @param {BMap Point Object} point new BMap.Point(116.404, 39.915)
 * @param {{x: number, y: number}} offset  {x:0, y:0}
 * @param {string} html 
 * @param {function} bindEventFun  ComplexCustomOverlay 
 */
helper.setCustomCover({
    point: new BMap.Point(116.404, 39.915),
    offset: {x: 300, y: 300},
    html: '',
    bindEventFun: function(data) {
        data.div.addEventListener('mouseover', function() {
            this.textContent = '';
        }, false);
        data.div.addEventListener('mouseout', function() {
            this.textContent = data.html;
        }, false);
    }
});

setCustomControl

/**
 * 
 * @param anchor  (BMAP_ANCHOR_TOP_RIGHT)
 * @param {{x: number, y: number}} offset  {x:20, y:20}
 * @param {string} html 
 * @param {function} bindEventFun  CustomControl 
 */
helper.setCustomControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    offset: {x: 20, y: 20},
    html: '<div class="bmap-ctrl"></div>',
    bindEventFun: function(data) {
        data.div.addEventListener('click', function() {
            bmap.centerAndZoom(point, 15);
        }, false);
    }
});