我有一个页面中心有一个jvectormap的网页,而滚动你的大部分时间都是在地图内滚动而不是在页面内滚动,我想做到这一点你需要点击地图到能够在其中滚动,并且当您将鼠标移出矢量地图时,地图内的滚动也会被禁用。
阅读有关jvectormap的文档我发现你可以在初始化之后更改zoomOnScroll变量的初始值,但我还没有找到一个如何做的明确示例。另外,当我在地图上为moustout创建一个事件监听器时,它与onRegionOut事件重叠,这意味着当用户将鼠标从一个国家移动到另一个国家时,将无法滚动地图。
这是我目前的代码。
if (document.getElementById('vector-map-world')) {
var world_markers = [
{'latLng': [-32.9521399, -60.7681972], 'name': 'Locación Rosario'},
{'latLng': [-34.6131708, -58.3810633], 'name': 'Locación Buenos Aires'},
];
var mapObject = $('#vector-map-world').vectorMap('get', 'mapObject');
mapObject.setFocusLatLng = function(scale, lat, lng){
var point,
proj = jvm.WorldMap.maps[this.params.map].projection,
centralMeridian = proj.centralMeridian,
width = this.width - this.baseTransX * 2 * this.baseScale,
height = this.height - this.baseTransY * 2 * this.baseScale,
inset,
bbox,
scaleFactor = this.scale / this.baseScale,
centerX,
centerY;
if (lng < (-180 + centralMeridian)) {
lng += 360;
}
point = jvm.Proj[proj.type](lat, lng, centralMeridian);
inset = this.getInsetForPoint(point.x, point.y);
if (inset) {
bbox = inset.bbox;
centerX = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x);
centerY = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y);
this.setFocus(scale, centerX, centerY);
}
}
mapObject.removeAllMarkers();
mapObject.addMarkers(world_markers);
mapObject.setFocusLatLng(4,-32.9521399, -60.7681972)
$('#vector-map-world').on( "click", function() {
console.log("you can scroll now");
});
$('#vector-map-world').on( "mouseout", function() {
console.log("you can't scroll now");
});
}
答案 0 :(得分:-1)
最后我决定不使用jvectormap,而是使用谷歌地图,可以设置为轻松点击滚动。
这是我所做的一个例子。
var mapObj = new GMaps({
div: '#map-markers',
scrollwheel: false // Initialize on false so that it requieres a click to be able to scroll
});
mapObj.addListener( 'click', function(event){
this.setOptions({scrollwheel:true}); // allow to scroll con click
});
mapObj.addListener( 'mouseout', function(event){
this.setOptions({scrollwheel:false}); // disable scroll when the mouse leaves the map box
});