javascript - 如何在 Mapbox GL JS 中添加自定义地理定位我按钮?
问题描述
我正在尝试向我的地图添加一个自定义的 Geolocate me 按钮,它有点工作,但前提是我还添加了 Mapbox 中的标准图标。下面的代码有效,但如果我删除 line map.addControl(geolocate, 'top-right');
,我的左按钮将停止工作。
// Initialize the geolocate control.
var geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
});
// Add the control to the map.
map.addControl(geolocate, 'top-right');
class ToggleControl {
constructor(options) {
this._options = Object.assign({}, this._options, options)
}
onAdd(map, cs) {
this.map = map;
this.container = document.createElement('div');
this.container.className = `${this._options.className}`;
const button = this._createButton('monitor_button')
this.container.appendChild(button);
return this.container;
}
onRemove() {
this.container.parentNode.removeChild(this.container);
this.map = undefined;
}
_createButton(className) {
const el = window.document.createElement('button')
el.className = className;
el.textContent = 'Use my location';
el.addEventListener('click', (e) => {
geolocate.trigger();
}, false)
return el;
}
}
const toggleControl = new ToggleControl({
className: 'mapboxgl-ctrl'
})
map.addControl(toggleControl, 'top-left')
屏幕截图- 蓝色是我要保留的内容,红色是要删除的
解决方案
您可以扩展 mapboxgl.GeolocateControl 类,而不是创建新的 mapboxgl.GeolocateControl 实例,如下所示:
class ToggleControl extends mapboxgl.GeolocateControl {
_onSuccess(position) {
this.map.flyTo({
center: [position.coords.longitude, position.coords.latitude],
zoom: 17,
bearing: 0,
pitch: 0
});
}
onAdd(map, cs) {
this.map = map;
this.container = document.createElement('div');
this.container.className = `mapboxgl-ctrl`;
const button = this._createButton('monitor_button')
this.container.appendChild(button);
return this.container;
}
_createButton(className) {
const el = window.document.createElement('button')
el.className = className;
el.textContent = 'Use my location';
el.addEventListener('click', () => {
this.trigger();
});
this._setup = true;
return el;
}
}
const toggleControl = new ToggleControl({})
map.addControl(toggleControl, 'top-left')
其他有用的链接:
推荐阅读
- javascript - 如何限制创建具有相同父引用的文档
- javascript - When select different options shows different input, but all inputs of all options are required
- java - 在 Java 中迭代时设置不同的值
- python - 装饰器从标准输出中保存文本文件
- ruby - VS Code: rubocop/linting 改变有多少行加下划线
- javascript - 创建元素不显示
- python - 带有运行状况检查的长时间运行任务
- c# - 在子网格视图中查找复选框和单个选择的 ID
- google-signin - 使用 Google 按钮响应式设计登录
- r - R 日期范围/窗口内唯一值的条件计数