百度地图BMapGLLib.DrawingManager 不正常显示报错

最新推荐文章于 2024-06-25 15:48:39 发布
最新推荐文章于 2024-06-25 15:48:39 发布
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/anlew8888/article/details/129080721
在Vue项目中集成百度地图JSAPIGL开源库时遇到错误，具体表现为找不到mask.addEventListener，原因是原型链继承问题。为解决这个问题，需要确保在实例化DrawingTool和Mask之前初始化它们的原型。通过在newDrawingTool()和newMask()之前添加代码初始化原型可以避免此类错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者官网：GitHub - huiyan-fe/BMapGLLib: 百度地图JSAPI GL版JavaScript开源工具库

 在vue项目中使用， 会报找不到 mask.addEventListener 错误， 

原型链继承问题， 在使用继承方法时，原型还没被加载，导致找不到。 这种错误是好是坏，单文件类型项目易出现。

搜索下面这2行代码分别调整到new DrawingTool() 和 new Mask() 之前 

!DrawingTool.prototype.initialize && initDrawingTool();

!Mask.prototype.initialize && initMask()

 

anlew8888
关注
百度地图 -- 鼠标绘制工具DrawingManager
weixin_38122772的博客
04-25 7972
问题1. DrawingManager画圈工具没有提供click的事件监听，如下图1，但我的业务场景需要点击工具栏后执行操作，咋办？ 图1: 答： 打开控制台，直接绑定点击事件到对应dom，如下图2： 图2: document.getElementsByClassName('BMapLib_circle')[0].addEventListener('click', e => { ...
QT使用QWebEngineView加载百度地图：Uncaught ReferenceError: BMapGL/BMap is not defined（已解决）
最新发布
柳鲲鹏
12-17 584
使用QT加载百度地图，就是报错。我使用了6.7.3、6.5.3两个版本要，都报错。复制百度官方网页，保存为文件。直接用浏览器打开，是能显示地图的。
类 BMapLib.DrawingManager___百度地图API
热门推荐
crazzy0727的专栏
07-03 1万+
类 BMapLib.DrawingManager 鼠标绘制管理类，实现鼠标绘制管理的入口。 实例化该类后，即可调用该类提供的open 方法开启绘制模式状态。 也可加入工具栏进行选择操作。  源文件: DrawingManager.js. 类 类 描述 BMapLib.DrawingManager(map, opts) Dra
百度地图的DrawingManager使用
kiscon的博客
04-27 6531
背景 当需要绘制圆形、矩形等围栏需求的时候，就需要鼠标绘制管理类。下面谈谈BMapLib.DrawingManager的使用以及遇到的问题。 类BMapLib.DrawingManager使用 参考地址 可以动态加载DrawingManager_min.js，以下是把该js下载到项目中修改使用。 应用 定义一个绘制模式文件 export const BMAP_DRAWING_MARKER = 'm...
调用百度地图BMapLib.DrawingManager绘制点线面圆
weixin_47459234的博客
06-25 964
调用百度地图BMapLib.DrawingManager绘制点线面圆
vue中使用百度地图报错“BMapGL is not defined”
qq_42802528的博客
11-10 2018
添加asyncLoadMap.js。
百度地图鼠标绘制工具DrawingManager overlaycancel事件回调没有触发解决方案
m0_60546228的博客
03-11 1021
再定位'document.getElementById("cancelOperate")'，在这个函数下面填上n.DingwingManager ._dispatchOverlayCancel(l, r)再定位'_dispatchOverlayComplete'这个函数，找到n._dispatchOverlayComplete(p)，在其下面加上n._dispatchOverlayCancel(p)console.log('取消事件',e）
百度地图通过DrawingManager.js改造绘制电子围栏，圆形、矩形、多边形、行政区域。（ 方式2）
weixin_46567616的博客
12-12 2328
百度地图通过DrawingManager.js改造绘制电子围栏，圆形、矩形、多边形、行政区域。（ 方式2）
百度离线地图鼠标绘制工具：DrawingManager_min.js
01-07
通过此工具用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积
类 BMapLib.DrawingManager___百度地图API 类详解(转载)
scscdslt的博客
10-09 3121
类 BMapLib.DrawingManager___百度地图API 类详解(转载)
DrawingManager_min.js
02-12
web百度地图范围框选应用，压缩包三个文件，内含DrawingManager_min.js与DrawingManager_min.css，index.html为调用案例
BMapGLLib:百度地图JSAPI GL版JavaScript开源工具库
05-04
BMapGLLib 本代码库是基于百度地图JSAPI GL版JavaScript开源工具库，如果使用的是2D地图的话，参考旧的。 如何使用 我们在将GL版的开源工具库放到了百度云的BOS存储上，根据github文件目录可以推理出BOS的路径，比如： <link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet"> [removed][removed] 功能示例 鼠标绘制工具条库 提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。且用户可使用J
在vue项目中使用百度地图api，报错BMapGL is not defined
莫宛的博客
08-02 6957
在vue项目中使用地图api，报错BMapGL is not defined
vue引用百度地图，drawingManager.setDrawingMode不能接受参数，否则会报错
xingchen678的博客
06-30 793
vue引用百度地图，drawingManager.setDrawingMode不能接受参数，否则会报错
C#调用百度地图API经验分享（四）
llw01的专栏
07-30 1338
这一篇，记录一下我调用的地图API实现的功能。下面介绍的都是一些片段的节选，不能直接复制就运行。在实现之前肯定要加载地图，先放一个webbroser控件，然后如下： [csharp] view plaincopyprint? private void Form1_Load(object sender, EventArgs e)          {             
vue引入百度地图 报错 BMap未定义 error ‘BMap‘ is not defined
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
01-11 1万+
引用百度地图 ReferenceError: BMap is not defined
vue项目引入百度地图BMapGL鼠标绘制工具
DZL_1997的博客
04-27 1879
这个地方需要引入两个源码文件，自己去全选复制后放到对应文件内就行了。
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
xiaoping_1988的博客
06-13 8610
vue如何引入百度地图绘制工具 百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html vue加载百度地图及绘制工具 ...
百度地图画多边形，画圆， 监听事件不触发原因
weixin_30294021的博客
03-19 901
var styleOptions = { strokeColor:"red", //边线颜色。 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 strokeWeight: 3, //边线的宽度，以像素为单位。 str...
BMapGLLib.DrawingManager 绘制的线怎么设置线在地图上的层级
09-15
BMapGLLib.DrawingManager 是百度地图API中用于绘制图形的管理类。在百度地图API中，绘制的线（即Polyline）默认情况下是绘制在最底层的，也就是所有线都会显示在其他要素之下。如果你希望设置线在地图上的层级，即覆盖在其他要素上显示，你需要在创建Polyline的时候指定一个zIndex属性。 在百度地图的API中，zIndex属性用于指定图形绘制的顺序，数值越大的图形将会显示在更上层。你可以按照以下步骤创建并设置线的层级： 1. 首先，创建一个PolylineOptions对象，这个对象用于设置绘制线段的参数。 2. 在设置PolylineOptions的属性时，你可以使用zIndex方法来指定一个层级值。 3. 然后，使用DrawingManager的createPolyline方法来创建一个线段，并将PolylineOptions作为参数传入。 4. 最后，确保将创建的线段添加到地图上。 以下是一个简单的示例代码： ```javascript var polyLineOptions = new BMap.PolylineOptions(); polyLineOptions.setPath(yourPathArray); // yourPathArray 是由经纬度坐标点组成的数组 polyLineOptions.setStrokeWeight(5); // 设置线宽 polyLineOptions.setStrokeColor('#ff0000'); // 设置线条颜色 polyLineOptions.setZIndex(1000); // 设置层级为1000 var polyline = map.drawings.add('polyline', polyLineOptions); polyline.setMap(map); ``` 在这段代码中，`yourPathArray` 是你想要绘制线段的坐标数组，`polyLineOptions.setZIndex(1000);` 是设置层级的关键代码，你可以根据实际需要调整zIndex的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值