地图怎么给自定义覆盖物添加属性
2021-09-23 17:34
高信美
构造函数并继承Overlay// 定义自定义覆盖物的构造函数 function SquareOverlay(center, length, color){ this._center = center; this._length = length; this._color = color; } // 继承API的BMap.Overlay SquareOverlay.prototype = new BMap.Overlay();
二、初始化自定义覆盖物// 实现初始化方法 SquareOverlay.prototype.initialize = function(map){ // 保存map对象实例 this._map = map; // 创建div元素，作为自定义覆盖物的容器 var div = document.createElement("div"); div.style.position = "absolute"; // 可以根据参数设置元素外观 div.style.width = this._length + "px"; div.style.height = this._length + "px"; div.style.background = this._color; // 将div添加到覆盖物容器中 map.getPanes().markerPane.appendChild(div); // 保存div实例 this._div = div; // 需要将div元素作为方法的返回值，当调用该覆盖物的show、 // hide方法，或者对覆盖物进行移除时，API都将操作此元素。 return div; }
三、绘制覆盖物// 实现绘制方法 SquareOverlay.prototype.draw = function(){ // 根据地理坐标转换为像素坐标，并设置给容器 var position = this._map.ntToOverlayPixel(this._center); this._div.style.left = position.x - this._length / 2 + "px"; this._div.style.top = position.y - this._length / 2 + "px"; }
四、添加覆盖物//添加自定义覆盖物 var mySquare = new SquareOverlay(map.getCenter(), 100, "red"); map.addOverlay(mySquare);
五、给自定义覆盖物添加
1、显示SquareOverlay.prototype.show = function(){ if (this._div){ this._div.style.display = ""; } } 添加完以上显示覆盖物后，只需要下面这句话，就可以显示覆盖物了。mySquare.show();
2、隐藏覆盖物// 实现隐藏方法 SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } } 添加完以上code，只需使用这句话，即可隐藏覆盖物。mySquare.hide();
3、改变覆盖物颜色SquareOverlay.prototype.yellow = function(){ if (this._div){ this._div.style.background = "yellow"; } } 上面这句话，是把覆盖物的背景颜色改成黄色，使用以下语句即可生效：mySquare.yellow();“第五部分、给覆盖物添加”小结：我们在地图上添加了一个红色覆盖物，然后分别添加“显示、隐藏、改变颜色”的。示意图如下：那么，我们需要在里，先写出map的容器，和3个按钮。<div style="width:520px;height:340px;border:1px solid gray" id="container"></div><p> <input type="button" value="移除覆盖物" onclick="mySquare.hide();"/> <input type="button" value="显示覆盖物" onclick="mySquare.show();"/> <input type="button" value="变成黄色" onclick="mySquare.yellow();"/></p>然后，在javascript中，添加这三个函数：// 实现显示方法 SquareOverlay.prototype.show = function(){ if (this._div){ this._div.style.display = ""; } } // 实现隐藏方法 SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = "none"; } }//改变颜色的方法SquareOverlay.prototype.yellow = function(){ if (this._div){ this._div.style.background = "yellow"; } }
六、如何给自定义覆盖物添加点击（这章重要！很多人问的）比如，我们给自定义覆盖物点击click。首先，需要添加一个addEventListener 的。如下：SquareOverlay.prototype.addEventListener = function(event,fun){ this._div['on'+event] = fun;} 再写该函数里面的参数，比如click。这样就跟地图API里面的覆盖物一样了。mySquare.addEventListener('click',function(){ alert('click');}); 同理，添加完毕addEventListener之后，还可以添加其他鼠标，比如mouseover。mySquare.addEventListener('mousemover',function(){ alert('鼠标移上来了');});
七、全部源代码自定义覆盖物
2021-09-23 18:59:17
相关问答
高信美
构造函数并继承Overlay//定义自定义覆盖物的构造函数functionSquareOverlay(center,length,color){this._center=center;this._length=length;this._col...
2021-09-23 17:34:07 296查看 2回答
李梓然
号详细地理位置页通过位置版信息搜索所在位置，也可以在地图权中选择找出企业所在位置，然后进行标记。在弹出的信息中点击“设为我的位置”。在弹出的确认对话框中，点击“确定”即可。公众平台如何设置自定义菜单：01打开公众平台。02找到【功能】。03点开【自定义菜单】。04选择【添...
2021-09-23 17:35:27 343查看 6回答
Julisaharabetty
后台，进入置页面，可通过体位置信息内搜索所在位置，也容可以在地图中选择找出企业所在位置，然后进行标记。在弹出的信息中点击“设为我的位置”。在弹出的确认对话框中，点击“确定”即可。公众平台如何设置自定义菜单：01打开公众平台。02找到【功能】。03点开【自定义菜单】。04选...
2021-09-23 17:35:27 405查看 3回答
污老师炎炎
方法/步骤第一步：打开，进入“朋友圈”主界面，点击手机屏幕右上角的“照相机”图标。这一步相信大家都会了，就不在多说。第二步：选择了相关的图片之后，点击界面上的“所在位置”，会弹出新的编辑界面，如下图：第三步：默认情况下会弹弹出你附近的地址，假如没有你想要的地址，那么我们就要自.....
2021-09-23 17:35:27 416查看 1回答
秋菊染霜
1、首先安装美图秀秀，打开软件。2、在批量处理的编辑框中，首先选择要添加信息的照片。3、按着Ctrl不放，用鼠标选择多个图片。选择好后点击确定。图片选好后，点击右框中的文字图标。4、在文字编辑栏中，如图点击九宫格，九宫格可以确定所添加的信息在图片的位置。5、然后在文本框中输入地理...
2021-09-23 17:35:27 1703查看 1回答
昨日星辰
查看API富标注。
2021-09-23 17:49:45 237查看 2回答
天花板恶魔
本设程以使用该套回SDK开发适用于Android系统移动设答备的地图应用，通过调用地图SDK接口，您可以轻松访问地图服务和数据，构建功能丰富、交互性强的地图类应用程序。自v4.0起，适配AndroidWear，支持Android穿戴设备，新增室内图相关功能。地图And...
2021-09-23 17:49:45 360查看 2回答
有猫在
件，newMarkerOptions().extraInfo();每个marker附件信息可点击监听击时根据附件信息的不内同跳容转到不同activity即可
2021-09-23 17:49:45 421查看 2回答
唯一的
程，用它来表示抽象的概念。这种表示是以约定的关系为基础的。地图是表达地图内容的基本手段，它由形状不同、大小不一、色彩有别的图形和文字组成。地图是地图的语言，是一种图形语言。他与文字相比，最大的特点是形象直观、一目了然。就单个而言，它可以表示客观事物的类别、空间分布位置...
2021-09-23 17:52:43 345查看 2回答
更多问答
最新知识
公司地址如何入驻花小猪打车地图标记？指路人地图标注服务中心铺如何入驻花小猪打车地图标记？
小编为您整理美团商家如何入驻，商家入驻教程、商家如何入驻地图、如何入驻地:、养殖营业执照如何入驻地图、家政公司如何入驻美团相关地图标记知识，详情可查看下方正文！
2023-01-17
公司地址认领搜狗地图标注多久审核？公司地址认领地图标注多久审核？
小编为您整理我在地图上标注审核认领需要多久、我在地图上标注审核认领需要多久y、我在地图上标注审核认领需要多久i、我在地图上标注审核认领需要多久Y、搜狗地图标注要多久才显示相关地图标记知识，详情可查看下方正文！
2023-01-17
门指路人地图标注服务中心如何做花小猪打车地图位置标记？门指路人地图标注服务中心花小猪打车地图位置地址标记？
小编为您整理如何做地图标记、地图如何做标记、so搜街景中如何做标记、360e启花贷款申请通过了是要去到门指路人地图标注服务中心办理手续的吗、哪些软件能实现在地图上标记门指路人地图标注服务中心位置相关地图标记知识，详情可查看下方正文！
2023-01-17
门指路人地图标注服务中心地图位置地址标记？门指路人地图标注服务中心苹果地图位置地址标记？
小编为您整理哪些软件能实现在地图上标记门指路人地图标注服务中心位置、门指路人地图标注服务中心地址标注、如何创建门指路人地图标注服务中心定位地址、如何创建门指路人地图标注服务中心定位地址、服装门指路人地图标注服务中心地址标注上地图怎么弄相关地图标记知识，详情可查看下方正文！
2023-01-17
凯立德地图位置定位怎么设置自己的指路人地图标注服务中心名？凯立德地图位置定位怎么设置公司地址？
小编为您整理凯立德怎么定位自己的位置啊、手机凯立德地图定位怎么设置往上走、地图位置定位怎么设置自己的指路人地图标注服务中心名、凯立德手机版如何定位自己的位置，求助、凯立德导航怎么设置指路人地图标注服务中心铺招牌相关地图标记知识，详情可查看下方正文！
2023-01-17