在百度地图marker的图层下创建一个img
时间: 2023-06-15 19:03:18 浏览: 225
百度地图marker动画的实现
5星 · 资源好评率100%
可以使用百度地图的API来实现在marker的图层下创建一个img。具体步骤如下:
1. 创建一个marker对象,并设置其位置和图标。
```
var marker = new BMap.Marker(point, {icon: myIcon});
```
2. 获取marker的图标元素,并将其添加到marker的图层中。
```
var iconElement = marker.getIconElement();
var markerLayer = marker.getLabel().parentNode;
markerLayer.insertBefore(imgElement, iconElement);
```
3. 创建一个img元素,并设置其src属性和样式。
```
var imgElement = document.createElement('img');
imgElement.src = 'path/to/image.png';
imgElement.style.position = 'absolute';
imgElement.style.width = '20px';
imgElement.style.height = '20px';
```
4. 设置img元素的位置,使其位于marker的图标下方。
```
var iconSize = myIcon.getSize();
imgElement.style.left = (-iconSize.width / 2) + 'px';
imgElement.style.top = (-iconSize.height / 2) + 'px';
```
完整代码如下:
```
var point = new BMap.Point(116.404, 39.915);
var myIcon = new BMap.Icon("path/to/icon.png", new BMap.Size(20,20));
var marker = new BMap.Marker(point, {icon: myIcon});
var imgElement = document.createElement('img');
imgElement.src = 'path/to/image.png';
imgElement.style.position = 'absolute';
imgElement.style.width = '20px';
imgElement.style.height = '20px';
var iconElement = marker.getIconElement();
var markerLayer = marker.getLabel().parentNode;
markerLayer.insertBefore(imgElement, iconElement);
var iconSize = myIcon.getSize();
imgElement.style.left = (-iconSize.width / 2) + 'px';
imgElement.style.top = (-iconSize.height / 2) + 'px';
```
阅读全文