百度地图(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>
  1. 代码

InfoBox

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

RichMarker

1     var htm1 =
2       "<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;'>" +
3       "<img style='margin-left:9px;margin-top: 8px;' src='//bj.bcebos.com/v1/mapopen/github/BMapGLLib/RichMarker/examples/images/small.jpg' />" +
4       "</div>",
5       myRichMarker1 = new BMapGLLib.RichMarker(htm1, new BMapGL.Point(116.30816, 40.056863), {
6         "anchor": new BMapGL.Size(-47, -116),
7         "enableDragging": true
8       });
9     map.addOverlay(myRichMarker1);
  1. 页面显示
    在这里插入图片描述
    在这里插入图片描述
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值