百度地圖（29）-GL 富文本 richMarker

1. 三維GL庫中支持的富文本主要有兩種，一種是 InfoBox ,一種是 RichMarker。

 

2.  通過添加 BMapGLLib 的 引用，支持對這兩種對象的調用。

  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js"></script>


  <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js" rel="stylesheet">
  <script src="//mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js"></script>

 

3. 代碼

InfoBox

  var infoBox = new BMapGLLib.InfoBox(map, html.join(""), {
      boxStyle: {
        background: "#6cb2fa",
        width: "270px",
        height: "300px"
      },
      closeIconMargin: "1px 1px 0 0",
      closeIconUrl: '//mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/examples/images/close.png',
      enableAutoPan: true,
      align: INFOBOX_AT_BOTTOM,
      offset: new BMapGL.Size(15, -150)
    });
    var marker = new BMapGL.Marker(poi);
     // map.addOverlay(marker);
    infoBox.open(marker);
    marker.enableDragging();

RichMarker

    var htm1 =
      "<div id='overLay' style='width:93px;height:116px; background:url(//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/back.png) left top no-repeat;position: absolute;'>" +
      "<img style='margin-left:9px;margin-top: 8px;' src='//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/small.jpg' />" +
      "</div>",
      myRichMarker1 = new BMapGLLib.RichMarker(htm1, new BMapGL.Point(116.30816, 40.056863), {
        "anchor": new BMapGL.Size(-47, -116),
        "enableDragging": true
      });
    map.addOverlay(myRichMarker1);

 

4. 頁面顯示

 

 

 

 

5. 源碼地址

https://github.com/WhatGIS/bdMap