地图导航器

优质

小牛编辑

114浏览

2023-12-01

Highmaps 支持多种不同方式的地图交互操作，包括缩放、平移、缩放到指定的区域等，所有相关的属性都可以在地图导航器（ mapNavigation ）中找到。

需要注意的是地图导航器默认是关闭的，这是因为地图导航器可能会影响到网页的导航操作。当用户在地图上滚动鼠标滚轮时，用户可能是需要操作网页的滚动，而当开启了地图导航器，Highmaps 会捕获鼠标滚轮事件，并响应成地图的缩放操作；同样的情况也会发生在移动端的手势操作上，Highmaps 会响应是缩放操作，这可能会影响用户对网页的缩放操作。所以除非是明确需要地图的缩放操作，否则不要开启地图导航器。

缩放按钮

当开启了地图导航器后，默认会在地图的左下角显示两个缩放按钮 [+] 和 [-]，分别对应放大和缩小地图。相关说明如下：

mapNavigation: {
    enabled: true // 开启地图导航器，默认是 false
    enableButtons: true // 是否启用缩放按钮
    buttonOptions: {    // 缩放按钮相关样式
        // ...
    },
    buttons: {
        zoomIn: {        // 缩小按钮相关配置
            // ...
        },
        zoomOut: {       // 放大按钮相关配置  
            // ...
        }
    }
}

其中缩小按钮默认调用的函数是 map.mapZoom(0.5)，放大按钮默认调用的是 map.mapZoom(2) ，可以通过 onclick 属性来自定这个事件函数。

手势操作

在移动端，缩放和平移操作是通过缩放手势和触摸手势来实现的，如果不需要移动端的手势操作，可以通过下面的代码来关闭：

mapNavigation: {
    enabled: true,  
    enableTouchZoom: false // 在开启导航器的情况下关闭移动端手势操作
}

鼠标滚轮缩放

开启地图导航器后，地图会根据鼠标所在的点为中心点进行滚轮缩放，enableMouseWheelZoom 可以开启或关闭这个操作，mouseWheelSensitivity 可以设置滚轮缩放比例。

另外 Highmaps 的滚轮操作也可以整合到 Highcharts 中使用，实现方法是引入 highmaps 模块文件，并开启地图导航器，下面是一个实例：

鼠标双击缩放

鼠标双击操作默认会缩放至当前的区域，当设置了 enableDoubleClickZoomTo 为 true 时，双击操作会将当前区域缩放至全屏（整个图表大小），如果不需要双击操作，可以通过 enableDoubleClickZoomTo 来关闭。

缩放相关的编程接口

Highmaps 地图可以通过编程接口 Chart.mapZoom 和 Point.zoomTo 来进行缩放操作。