地图控件
自定义控件
控制必须实现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 |
控制进入全屏模式地图的按钮 |