php百度地图添加标记,JavaScript API - 自定义标注

实现initialize方法，当调用map.addOverlay方法时，API会调用此方法。

当调用map.addOverlay方法添加自定义覆盖物时，API会调用该对象的initialize方法用来初始化覆盖物，在初始化过程中需要创建覆盖物所需要的DOM元素，并添加到地图相应的容器中。这里我们选择添加在容器markerPane上。

// 实现初始化方法

SquareOverlay.prototype.initialize = function(map){

// 保存map对象实例

his._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;

}

地图提供了若干容器供覆盖物展示，通过map.getPanes方法可以得到这些容器元素，它们包括：

floatPane

markerMouseTarget

floatShadow

labelPane

markerPane

mapPane

这些对象代表了不同的覆盖物容器元素，它们之间存在着覆盖关系，最上一层为floatPane，用于显示信息窗口内容，下面依次为标注点击区域层、信息窗口阴影层、文本标注层、标注层和矢量图形层。

我们自定义的方形覆盖物可以添加到任意图层上，如上示例，我们选择添加到markerPane上，作为其一个子结点。

php百度地图添加标记,JavaScript API - 自定义标注 | 百度地图API SDK相关推荐

百度地图添加多个marker点位标注
百度地图添加多个marker点位标注新建一个TMap.js文件 export function TMap(key) {return new Promise(function (resolve, re ...
QGIS二次开发地图添加标记添加注记Svg小图标SvgItem
QGIS二次开发地图添加标记添加注记Svg小图标即QgsAnnotationLayer.QgsMarkerSymbol和QgsAnnotationMarkerItem的用法,我把QGIS3.20软件 ...
Echarts显示自定义标注点/地图map引导线
Echarts显示自定义标注点/地图map引导线先贴效果.这里实现了 1.地图上县区名的显示,鼠标移入显示相应的项目数(如下图东源县) 2.地图上增加自定义地图(这里增加了没有的高新区&市辖 ...
echart 地图添加了滚轮放大缩小导致二级地图无法居中问题
echart 地图添加了滚轮放大缩小导致二级地图无法居中问题由于地图有鼠标拖动移动,滚轮放大缩小的需求.添加了以下代码 geo: {map: 'china',type: "map" ...
百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
html中怎么给地图添加标记,百度地图中怎么添加旗帜标记?
感谢您的收看,我们在游玩,或因为工作等等原因,都有用到地图的时候,然而,电子地图的使用不仅方便了许多,而且,位置信息也更加的全面,特别是在电脑上看地图由于屏幕大,就更是好 1.首先,在浏览器中搜索百度 ...
android 高德地图显示标题,android学习之高德地图添加标记
Marker用于标注地图上的一个特定位置 aMap的.addMarker(markerOptions) 方法即可 markerOptions有如下的属性 position(Required) 在地图上 ...
android 高德地图标记,android学习之高德地图添加标记
Marker用于标注地图上的一个特定位置 aMap的.addMarker(markerOptions) 方法即可 markerOptions有如下的属性 position(Required) 在地图上 ...

php百度地图添加标记,JavaScript API - 自定义标注 | 百度地图API SDK

php百度地图添加标记,JavaScript API - 自定义标注 | 百度地图API SDK相关推荐

最新文章

热门文章