BMapGL marker 设置Name
时间: 2023-08-31 11:37:27 浏览: 58
BMapGL 的 Marker 类并没有直接提供设置 name 属性的方法,但可以通过自定义覆盖物来实现。
具体实现步骤如下:
1. 创建一个自定义的覆盖物类,继承自 BMapGL.Overlay 类:
```javascript
function CustomMarker(point, name) {
this._point = point;
this._name = name;
}
CustomMarker.prototype = new BMapGL.Overlay();
// 实现 initialize 方法和 draw 方法
CustomMarker.prototype.initialize = function(map) {
this._map = map;
var div = document.createElement("div");
div.style.position = "absolute";
div.style.width = "60px";
div.style.height = "60px";
div.style.lineHeight = "60px";
div.style.textAlign = "center";
div.style.backgroundColor = "red";
div.style.color = "white";
div.style.fontSize = "20px";
div.style.borderRadius = "50%";
div.innerHTML = this._name;
map.getPanes().labelPane.appendChild(div);
this._div = div;
return div;
};
CustomMarker.prototype.draw = function() {
var position = this._map.pointToOverlayPixel(this._point);
this._div.style.left = position.x - 30 + "px";
this._div.style.top = position.y - 30 + "px";
};
```
在自定义的覆盖物类中,通过传入的 `name` 参数来设置 marker 的名称。
2. 在地图上添加自定义的覆盖物:
```javascript
var point = new BMapGL.Point(116.404, 39.915);
var customMarker = new CustomMarker(point, "MarkerName");
map.addOverlay(customMarker);
```
通过以上方式,就可以在地图上添加一个自定义的 marker,并且设置其名称。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)