如何解决如何在Mapbox GL JS中添加自定义geolocate me按钮?
我试图在地图上添加一个自定义的Geolocate me按钮,这种方法是可行的,但是前提是我还必须从Mapbox中添加标准图标。下面的代码有效,但是如果我删除行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')
screenshot-蓝色是我要保留的颜色,红色是我要保留的
解决方法
代替创建新的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')
其他有用的链接:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。