实现一个简单的百度地图演示

注意！

必须引入百度地图的api，引入需要自己注册百度地图

这个是简单的样式为了能展示，其余想要的需要自己去画了

        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            width: 400px;
            height: 300px;
            margin: 100px auto;
        }

下面是js代码

        var map = new BMap.Map("container");
        //设置中心坐标
        var point = new BMap.Point(108.949188, 34.320415);
        //开启鼠标滚轮的缩放
        map.enableScrollWheelZoom(true);
        //添加地图控件
        map.addControl(new BMap.NavigationControl());
        //地图初始化，同时设置地图展示级别
        map.centerAndZoom(point, 15);
        // 创建标注
        var marker = new BMap.Marker(point);
        //将标注添加到地图中
        map.addOverlay(marker);
        marker.addEventListener('click', function () {
            alert('我被点击了');
        })
        //让这个标注点具备可以拖拽的行为
        marker.enableDragging();
        marker.addEventListener('dragend', function (e) {
            alert("经度" + e.point.lng + "\n纬度：" + e.point.lat);

        })
        //
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 100,    // 信息窗口高度
            title: "I`m here"  // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow("陕西省西安市未央区", opts); 
        map.openInfoWindow(infoWindow, map.getCenter());