南昌市高新区艾溪湖二路 366号悦峰商务广场1#办公楼 1404室 15179110655

您现在的位置:

地图控件

自定义控件

控制必须实现onAdd和onRemove方法,onAdd必须返回一个dom元素,它常常是一个div元素。使用map.addControl()方法添加控件到地图。

                    // Control implemented as ES6 class
                    class HelloWorldControl {
                        onAdd(map) {
                            this._map = map;
                            this._container = document.createElement('div');
                            this._container.className = 'mapboxgl-ctrl';
                            this._container.textContent = 'Hello, world';
                            return this._container;
                        }

                        onRemove() {
                            this._container.parentNode.removeChild(this._container);
                            this._map = undefined;
                        }
                    }

                    // Control implemented as ES5 prototypical class
                    function HelloWorldControl() { }

                    HelloWorldControl.prototype.onAdd = function(map) {
                        this._map = map;
                        this._container = document.createElement('div');
                        this._container.className = 'mapboxgl-ctrl';
                        this._container.textContent = 'Hello, world';
                        return this._container;
                    };

                    HelloWorldControl.prototype.onRemove = function () {
                        this._container.parentNode.removeChild(this._container);
                        this._map = undefined;
                    };
                
类名 说明

xtal.NavigationControl

控件包含缩放按钮和一个指南针。

xtal.GeolocateControl

提供了使用浏览器的地理位置API,以在地图上定位用户的按钮。 并非所有浏览器都支持地理位置,并且某些用户可能会禁用该功能。对包括Chrome在内的现代浏览器的地理位置支持要求通过HTTPS提供网站。如果地理定位支持不可用,则GeolocateControl将不可见。

xtal.ScaleControl

控制显示的比例尺等控件。

xtal.FullscreenControl

控制进入全屏模式地图的按钮