百度地图js开发

 

function initMap() {
    createMap(), setMapEvent(), addMapControl(), addMarker()
}
function createMap() {
    var a = new BMap.Map("dituContent"),
        b = new BMap.Point(116.404, 39.915);
    a.centerAndZoom(b, 20), window.map = a
}
function setMapEvent() {
    map.enableDragging(), map.enableDoubleClickZoom(), map.enableKeyboard()
}
function addMapControl() {
    var a = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(a);
    var b = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: 1
    });
    map.addControl(b);
    var c = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
    });
    map.addControl(c)
}
function addMarker() {
    for (var a = 0; a < markerArr.length; a++) {
        var b = markerArr[a],
            c = b.point.split("|")[0],
            d = b.point.split("|")[1],
            e = new BMap.Point(c, d),
            f = createIcon(b.icon),//调用creatIcon方法，传递参数，初始化
            g = new BMap.Marker(e, {//添加icon
                icon: f
            }),
            h = b.mapStyle;
        map.addOverlay(g), map.setMapStyle(h),
            function () {
                g.addEventListener("click", function () {//为icon添加事件
                    window.open("http://api.map.baidu.com/geocoder?address=北京天安门&output=html", "_blank");
                })
            }()
    }
}

function createIcon(a) {
    var b = new BMap.Icon("./icon.png",
        new BMap.Size(a.w, a.h), {
            imageSize: new BMap.Size("auto", a.h),//相当background-size图片大小
            infoWindowAnchor: new BMap.Size(a.lb + 5, 1),
            anchor: new BMap.Size(a.x, a.h)
        });
    return b
}

var markerArr = [{
    point: "116.404|39.915",
    mapStyle: {
        features: ["road", "building", "water", "land"],//隐藏地图上的poi
        style: "dark"  //设置地图风格为高端黑
    },
    isOpen: 0,
    icon: {
        w: 180,
        h: 90,
        l: 0,
        t: 0,
        x: 60,
        lb: 12
    }
}];
initMap();

 

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="dituContent" style="width: 100%;height:500px">
</div>
<script src="./jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=秘钥></script>
<script src="./map.js"></script>
</body>
</html>

申请秘钥将<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥></script>中的秘钥替换就可以了

完整版下载地址  http://pan.baidu.com/s/1pLoKmx1

注意开发的时候遇到一个问题，本地需要在localhost下访问。

posted @ 2017-08-04 13:37  sunniejs  阅读(358)  评论(0)  编辑  收藏  举报