<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=36ue7tjwq6nbRHXoy18FZTlUNFfs2TP8"></script>
  <div class="map_box">
        <div style="width:100%;height: 28.75rem;;border:#ccc solid 1px;font-size:12px" id="mapmap"></div>
    </div> 

    <script type="text/javascript">
        //创建和初始化地图函数：
        function initMap() {
            createMap(); //创建地图
            setMapEvent(); //设置地图事件
            addMapControl(); //向地图添加控件
            addMapOverlay(); //向地图添加覆盖物
        }

        function createMap() {
            map = new BMap.Map("mapmap");
            map.centerAndZoom(new BMap.Point(120.678419, 31.18981), 19);
        }

        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: "苏州市吴江区华东商业城C区3幢631-1",
                title: "苏州允恒自动化设备有限公司",
                imageOffset: {
                    width: -46,
                    height: -21
                },
                position: {
                    lat: 31.18981,
                    lng: 120.678419
                }
            }];
            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, 25), {
                        imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                    })
                });
                var label = new BMap.Label(markers[index].title, {
                    offset: new BMap.Size(25, 5)
                });
                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() {
            var scaleControl = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
            var navControl = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(navControl);
            var overviewControl = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: true
            });
            map.addControl(overviewControl);
        }
        var map;
        initMap();
    </script>

转载请注明：js脚本» 地图自适应