百度地图在web端的使用

------------恢复内容开始------------

1. 先加载  百度js   

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

 

2. 创建地图包裹容器 

     var map = new BMapGL.Map("address");  address 为标签的 id值

3. 创建一个坐标点

    var point = new BMapGL.Point(114.415686, 30.495032);

4. 创建地图，并将点设置到中心点

    map.centerAndZoom(point, 15);

基本以上为基本使用

 

5. 开启缩放 

     map.enableScrollWheelZoom();

6. 创建小图标标注

    var marker = new BMapGL.Marker(point); 

7. 将创建的标注，添加到地图，

     map.addOverlay(marker);

 

增加样式，与设置 的标注 小图标，设置 hover 效果

8 . 设置  hover 的位置

    var opts = {

        position: point,    // 指定文本标注所在的地理位置

        offset: new BMapGL.Size(18, -50)    //设置hover 的文本偏移量

    }

8. 创建文本标注对象

      let  label = new BMapGL.Label("少年你的头发 茂密吗？", opts);  // 创建文本标注对象

9. 给创建的文本标注对象设置 css

   label.setStyle({

            background: "#51669F",

            border: "1px solid '#51669F'",

            borderRadius: '5px',

            color: '#fff',

            lineHeight: '26px',

            textAlign: 'center',

            padding: '4px 8px'

      });

10 .将 创建的文本标注对象，添加到地图上面

     map.addOverlay(label);

11 .文本标注，添加到地图了就显示的；

     用   map.removeOverlay(label);  删除 => 添加到地图的标注 ；  

     可以用来设置 hover  效果，  移除的时候 执行一下

 

     如

    marker.addEventListener("mouseover", function (e) {

        map.addOverlay(label);

    })

    marker.addEventListener("mouseout", function (e) {

        map.removeOverlay(label);

    })