浏览器中插入百度地图

在head中引入js

HTML添加地图容器

js中定义位置

//地图
    var map = new BMap.Map("map");    //HTML的地图容器ID
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //var opts = {
  //    type: BMAP_NAVIGATION_CONTROL_SMALL,//显示的缩放控件样式
   //   anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //控件位置右下角
  //    offset: new BMap.Size(10, 0)  //控件位置偏移x,y
// }
  //  map.addControl(new BMap.NavigationControl(opts)); //打开自带缩放控件
    // 自定义控件类，即function
        function ZoomControl() {
            // 设置默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;  //缩放控制位置
            this.defaultOffset = new BMap.Size(10, 10);  //偏移量
        }
        // 通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();

        // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
        // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
        ZoomControl.prototype.initialize = function (map) {
            //创建一个DIV
            var mydiv = document.createElement("div");
            //创建一个放大用的img
            var img_plus = document.createElement("img");
            //设置img的src属性
            img_plus.setAttribute("src", "http://kingdom.com/public/images/d4/7a/ee/ccfa05109ccd142b0486514a633cfdff66020514.png?09186_OW500_OH500");
            img_plus.style.width=30+'px';
            img_plus.style.height=30+'px';
            //为img设置点击事件
            img_plus.onclick = function () {
                map.zoomTo(map.getZoom() + 1);
            }
            //创建一个缩小用的img
            var img_minus = document.createElement("img");
            img_minus.setAttribute("src", "http://kingdom.com/public/images/d4/7a/ee/ccfa05109ccd142b0486514a633cfdff66020514.png?09186_OW500_OH500");
            img_minus.style.width=30+'px';
            img_minus.style.height=30+'px';
            img_minus.onclick = function () {
                map.zoomTo(map.getZoom() - 1);
            }
            //添加放大的img图标到div中
            mydiv.appendChild(img_plus);
            //加一个换行符，使2个图标上下排列
            mydiv.appendChild(document.createElement("br"));
            //添加缩小的img图标到div中
            mydiv.appendChild(img_minus);
            //添加DOM元素到地图中
            map.getContainer().appendChild(mydiv);
            //将DOM元素返回；
            return mydiv;
        }

        // 创建控件实例
        var myZoomCtrl = new ZoomControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl);

参考网址：http://lbsyun.baidu.com/index.php?title=jspopular/guide/widget