html 引用百度地图

第一步 引用百度地图api

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&type=webgl&ak=gLZ9bfbbxoNq11111111bA6hS5fI"></script>

第二步 给容器设置成宽高

<style type="text/css">  

        html{height:100%}  

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

        #container{height:100%;width:100%;background: #eee;}  

    </style>  

 <div id="container">

  </div>

第三步 配置相关参赛

 <script>

    var map = new BMapGL.Map("container");          // 创建地图实例

    var point = new BMapGL.Point(116.655992, 39.254949);  // 创建点坐标

    map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

   // map.setHeading(64.5);   //设置地图旋转角度

   // map.setTilt(73);       //设置地图的倾斜角度

    //    var opts = {

    //     width: 200,     // 信息窗口宽度

    //     height: 30,    // 信息窗口高度

    //     title: ""  // 信息窗口标题

    // }

    // var infoWindow = new BMapGL.InfoWindow("北京市大厦", opts);  // 创建信息窗口对象

    // map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

    //  // 创建带高度的点

    //  var marker3d = new BMapGL.Marker3D(point, 8000, {

    //         size: 50,

    //         shape: BMAP_SHAPE_CIRCLE,

    //         fillColor: '#454399',

    //         fillOpacity: 0.6

    //     });

    //     // 将点添加到地图上

    //     map.addOverlay(marker3d);

 

     var myIcon = new BMapGL.Icon("../img/dw.png", new BMapGL.Size(30, 50), {  

      // 指定定位位置。  

      // 当标注显示在地图上时，其所指向的地理位置距离图标左上  

      // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  

      // 图标中央下端的尖角位置。  

     // anchor: new BMapGL.Size(10, 25),  

      // 设置图片偏移。  

      // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  

      // 需要指定大图的偏移位置，此做法与css sprites技术类似。  

      //imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移  

    });    

      // 创建标注对象并添加到地图  

    var marker = new BMapGL.Marker(point, {icon: myIcon});  

    map.addOverlay(marker);

  </script>