没有match的答案？试试对话大模型
（以“{{jspopularGL-sidebar}} <div class="h1-title">自定义覆盖物</div><div id="update-time1">更新时间：2023年02月21日</div><div class="bluetitle"><div class=...”为内容创建页面） |
|||
| 第1行： | 第1行： | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
| − | <div class="h1-title">自定义覆盖物</div><div id="update-time1">更新时间：2023年02月21日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">为了支持更丰富多彩的地图覆盖物类型，提供自定义覆盖物类 CustomOverlay，支持开发者自定义DOM覆盖物叠加到地图上，比如实现自定义的Canvas、SVG、DOM元素，常用于叠加自定义的表格、图片、文字、GIF动画、视频等<br/>该自定义覆盖物一次只能创建一个覆盖物，如果想要批量创建同类型的覆盖物，可以移步[ | + | <div class="h1-title">自定义覆盖物</div><div id="update-time1">更新时间：2023年02月21日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text">为了支持更丰富多彩的地图覆盖物类型，提供自定义覆盖物类 CustomOverlay，支持开发者自定义DOM覆盖物叠加到地图上，比如实现自定义的Canvas、SVG、DOM元素，常用于叠加自定义的表格、图片、文字、GIF动画、视频等<br/>该自定义覆盖物一次只能创建一个覆盖物，如果想要批量创建同类型的覆盖物，可以移步[https://lbs.baidu.com/jsdemo.htm#customlayer-canvas 自定义Html覆盖物图层类CustomHtmlLayer]，支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbs.baidu.com/jsdemo.htm#customoverlay-canvas"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbs.baidu.com/jsdemo/demo/customoverlay-canvas.htm 自定义canvas覆盖物]</div><div class="demo_btn" style="width:485px;">[https://lbs.baidu.com/jsdemo/demo/customoverlay-dom.htm 自定义DOM覆盖物]</div></div><div class="jsapi-demo-link">[https://lbs.baidu.com/jsdemo.htm#customoverlay-canvas DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>类参考</span></div></div></div><div class="serve-explain-text"> |
（1）构造函数 | （1）构造函数 | ||
| − | </div> | + | </div><div class="customlayDom"> |
| − | <div class = | + | |
{| width="519" border="1" | {| width="519" border="1" | ||
|- | |- | ||
| 第17行： | 第16行： | ||
{| width="519" border="1" | {| width="519" border="1" | ||
|- | |- | ||
| − | | width="20" colspan="2"| '''参数名''' | + | | width="20" colspan="2" | '''参数名''' |
| width="90" | '''类型''' | | width="90" | '''类型''' | ||
| width="297" | '''说明''' | | width="297" | '''说明''' | ||
|- | |- | ||
| colspan="2" | createDom | | colspan="2" | createDom | ||
| − | + | | HTMLElement | |
| 用户自定义创建DOM函数 | | 用户自定义创建DOM函数 | ||
|- | |- | ||
| − | | rowspan="8" | options | + | | rowspan="8" | options |
| point | | point | ||
| Point | | Point | ||
| 第58行： | 第57行： | ||
| 是否可以在覆盖物位置拖拽地图 | | 是否可以在覆盖物位置拖拽地图 | ||
|} | |} | ||
| − | </div> | + | </div><div style="margin-top: 15px;margin-bottom: 20px;"> |
| − | <div style="margin-top: 15px;margin-bottom: 20px;"> | + | |
（2）方法 | （2）方法 | ||
</div> | </div> | ||
| 第74行： | 第72行： | ||
| 显示自定义覆盖物 | | 显示自定义覆盖物 | ||
|- | |- | ||
| − | | hide() | + | | hide() |
| none | | none | ||
| none | | none | ||
| 第100行： | 第98行： | ||
|} | |} | ||
<div style="margin-top: 15px;margin-bottom: 20px;"> | <div style="margin-top: 15px;margin-bottom: 20px;"> | ||
| − | （3）事件 | + | （3）事件<br/><span style="font-size: 12px;"> 通过addEventListener(event, callback)方法进行事件绑定，支持如下事件：</span> |
| − | <br/> | + | |
| − | <span style="font-size: 12px;"> 通过addEventListener(event, callback)方法进行事件绑定，支持如下事件：</span> | + | |
</div> | </div> | ||
{| width="519" border="1" | {| width="519" border="1" | ||
2024年11月27日 (三) 11:20的最后版本
自定义覆盖物
更新时间：2023年02月21日
简介
为了支持更丰富多彩的地图覆盖物类型，提供自定义覆盖物类 CustomOverlay，支持开发者自定义DOM覆盖物叠加到地图上，比如实现自定义的Canvas、SVG、DOM元素，常用于叠加自定义的表格、图片、文字、GIF动画、视频等
该自定义覆盖物一次只能创建一个覆盖物，如果想要批量创建同类型的覆盖物，可以移步自定义Html覆盖物图层类CustomHtmlLayer，支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。
该自定义覆盖物一次只能创建一个覆盖物，如果想要批量创建同类型的覆盖物，可以移步自定义Html覆盖物图层类CustomHtmlLayer，支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。
类参考
（1）构造函数
| 名称 | 说明 |
| CustomOverlay(createDom, options: Object) | 创建单个自定义DOM覆盖物 |
参数说明：
| 参数名 | 类型 | 说明 | |
| createDom | HTMLElement | 用户自定义创建DOM函数 | |
| options | point | Point | 覆盖物的经纬度，必填 |
| offsetX | Number | 覆盖物水平偏移量 | |
| offsetY | Number | 覆盖物垂直偏移量 | |
| MinZoom | Number | 最小显示层级 | |
| MaxZoom | Number | 最大显示层级 | |
| properties | Object | 自绑定属性 | |
| enableMassClear | Boolean | 是否能被统一清除掉覆盖物 | |
| enableDraggingMap | Boolean | 是否可以在覆盖物位置拖拽地图 | |
（2）方法
| 方法名 | 参数 | 返回值 | 说明 |
| show() | none | none | 显示自定义覆盖物 |
| hide() | none | none | 隐藏自定义覆盖物 |
| setPoint | point | none | 设置覆盖物新坐标 |
| getPoint | none | point | 获取自定义覆盖物坐标 |
| setProperties | object | none | 设置覆盖物属性，与初始化的属性增量修改或合并 |
| getProperties | none | object | 获取自定义覆盖物的属性 |
（3）事件
通过addEventListener(event, callback)方法进行事件绑定，支持如下事件：
| 事件名 | 说明 |
| click | 鼠标点击事件 |
| mouseover | 鼠标悬浮事件 |
| mouseout | 鼠标移出事件 |
图层示例
// 创建自定义覆盖物DOM
function createDOM(feature) {
const img = document.createElement('img');
img.style.height = '240px';
img.style.width = '80px';
img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
img.draggable = false;
return img;
}
// 创建自定义覆盖物
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
point: new BMapGL.Point(116.40342230333138, 39.92498414216742),
opacity: 0.5,
map: map,
offsetY: -10,
properties: {
title: 'this is a title',
size: '100'
}
});
// 将自定义覆盖物添加到地图上
map.addOverlay(customOverlay);
// 绑定鼠标事件
customOverlay.addEventListener('click', function (e) {
console.log('eeee', e);
});