npm 包 vue-map-utils 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

介绍

在前端开发中，常常需要对地图进行操作和展示。然而，原生的地图 API 并不够简洁和方便。为了提高开发效率，社区出现了许多优秀的地图工具库，其中，vue-map-utils 是一款非常实用的工具库。

vue-map-utils 是一款基于 Vue.js 的地图工具库，它封装了一系列对地图进行绘制、操作和交互的函数和组件。相比原生的地图 API，它更加易用、简单明了，可以节约开发者的开发时间和精力。

下文将详细介绍 vue-map-utils 的安装、使用，还会给出具体的示例代码，希望能帮助读者更好地使用这款工具。

安装

首先，需要在项目中安装 vue-map-utils。可以使用 npm 命令进行安装：

--- ------- ------------- --

也可以使用 yarn 进行安装：

---- --- -------------

使用

安装好 vue-map-utils 之后，就可以在项目中使用它了。下面是使用步骤：

  1. 引入并注册组件
------ --- ---- -----
------ ----------- ---- ---------------

--------------------
  1. 在项目中使用组件
----------
  -----
    ---- -----------
  ------
-----------

--------
------ ------- -
  --------- -
    --------------
  --

  -------- -
    --------- -
      ----- --- - ------------------

      -- ---------
    -
  -
-
---------

这样，就可以在项目中轻松使用 vue-map-utils 提供的组件和方法了。

组件和方法

vue-map-utils 提供了很多优秀的组件和方法，这里只介绍常用的一些：

Map 组件

Map 组件是 vue-map-utils 中最基本的组件，它封装了地图的初始化、销毁等操作，并在其中集成了许多对地图进行操作的函数。

Props

名称 说明 类型
id 组件 id String
amapkey 高德地图的 key String
mapStyle 地图的样式，可选 light/dark，默认为 light String
zoom 地图的缩放等级，可选 3~18，默认为 13 Number
center 地图的中心点，经纬度数组，如 [116.405467, 39.907761]，默认为北京 Array
resizeEnable 是否监控地图容器尺寸变化，并及时调整地图大小，默认为 true Boolean
zoomEnable 地图是否可通过鼠标滚轮缩放，默认为 true Boolean
dragEnable 地图是否可通过鼠标拖拽平移，默认为 true Boolean
scrollWheel 地图是否允许通过鼠标滚轮缩放，默认为 true Boolean
keyboardEnable 是否启用键盘操作地图，默认为 true Boolean
doubleClickZoom 地图在双击时是否进行缩放，默认为 true Boolean
showIndoorMap 是否显示室内地图，默认为 false Boolean
expandZoomRange 是否支持地图缩放的扩展范围，默认为 false Boolean

Methods

名称 说明 参数
getCenter 获取地图的中心点 无
getZoom 获取地图的缩放等级 无
setCenter 设置地图的中心点 center: Number[]
setZoom 设置地图的缩放等级 zoom: Number
setZoomAndCenter 同时设置地图的缩放等级和中心点 zoom: Number, center: Number[]
getBounds 获取当前视野的经纬度范围 无
setMapStyle 设置地图的样式，可选 light/dark，默认为 light mapStyle: String
destroy 销毁地图 无

事件

名称 说明 参数
click 鼠标左键单击事件 e: MouseEvent
dblclick 鼠标左键双击事件 e: MouseEvent
rightclick 鼠标右键单击事件 e: MouseEvent
movestart 移动开始事件 e: MouseEvent
moving 移动进行时事件 e: MouseEvent
moveend 移动结束事件 e: MouseEvent
zoomchange 缩放等级发生变化事件 e: AMap.Map.ZoomEvent
resize 地图容器尺寸发生变化事件 e: AMap.Map.SizeEvent

Marker 组件

Marker 组件是用于在地图上添加点标记的组件，它可以添加文字标签和自定义图标。

Props

名称 说明 类型
position 点标记在地图上显示的位置，经纬度数组，如 [116.405467, 39.907761] Array<Number>
offset 点标记显示位置偏移量，像素值为正，向下和向右偏移 Array<Number>
icon 点标记图标的地址，可以是相对地址或者 URL String
label 点标记文本标签的内容 String
labelOffset 点标记文本标签偏移量 Array<Number>
extData 用户自定义属性，支持 JavaScript 对象 Any
draggable 是否可拖拽，支持 PC 端和移动端 Boolean
clickable 是否可点击 Boolean
animation 点标记的动画效果，如 drop/bounce 等 String
angle 点标记的旋转角度，从正北开始，顺时针计算，单位度 Number

Methods

名称 说明 参数
getPosition 获取点标记的经纬度 无
setPosition 设置点标记的经纬度 position: Array<Number>
setOffset 设置点标记的偏移量 offset: Array<Number>
setIcon 设置点标记的图标路径 icon: String
setLabel 设置点标记的文本标签 label: String
setLabelOffset 设置点标记的文本标签偏移量 offset: Array<Number>
setAngle 设置点标记的旋转角度，从正北开始，顺时针计算，单位度

事件

名称 说明 参数
click 鼠标左键单击事件 e: AMap.Marker.Event
dblclick 鼠标左键双击事件 e: AMap.Marker.Event
rightclick 鼠标右键单击事件 e: AMap.Marker.Event
mouseover 鼠标移到点标记上触发事件 e: AMap.Marker.Event
mouseout 鼠标从点标记移开触发事件 e: AMap.Marker.Event
mousedown 鼠标在点标记上按下触发事件 e: AMap.Marker.Event
mouseup 鼠标在点标记上松开触发事件 e: AMap.Marker.Event
mousemove 鼠标在点标记上移动触发事件 e: AMap.Marker.Event
dragstart 开始拖拽点标记时触发事件 e: AMap.Marker.Event
dragging 拖拽标记进行时触发事件 e: AMap.Marker.Event
dragend 结束拖拽点标记时触发事件 e: AMap.Marker.Event

Polyline 组件

Polyline 组件是用于在地图上添加折线的组件，它可以添加自定义的样式。

Props

名称 说明 类型
path 折线的节点坐标信息，经纬度数组，如 [[116.405467,39.907761], [116.406467,39.907761]] Array<Array<Number>>
strokeColor 折线颜色，可选 argb、rgb、rrggbb、#rrggbb，如 #FF0000 String
strokeOpacity 折线透明度，范围为 0~1，0 表示完全透明，1 表示不透明 Number
strokeWeight 折线宽度，单位：像素 Number
strokeStyle 折线样式，可选实线（solid）或虚线（dashed） String
lineCap 折线拐角处的绘制方式，可选 round/butt/square String
lineJoin 折线两端点与相邻线段交汇处的绘制方式，可选 round/bevel/miter String
extData 用户自定义属性，支持 JavaScript 对象 Any
draggable 是否可拖拽，支持 PC 端和移动端 Boolean
clickable 是否可点击 Boolean
showDir 是否显示方向箭头，默认为 false Boolean

Methods

名称 说明 参数
getPath 获取折线的所有节点坐标 无
setPath 设置折线的所有节点坐标 path: Array<Array<Number>>
setOptions 设置折线的样式属性 options: Object

事件

名称 说明 参数
click 鼠标左键单击事件 e: AMap.Polyline.Event
dblclick 鼠标左键双击事件 e: AMap.Polyline.Event
rightclick 鼠标右键单击事件 e: AMap.Polyline.Event
mouseover 鼠标移到折线上触发事件 e: AMap.Polyline.Event
mouseout 鼠标从折线移开触发事件 e: AMap.Polyline.Event
mousedown 鼠标在折线上按下触发事件 e: AMap.Polyline.Event
mouseup 鼠标在折线上松开触发事件 e: AMap.Polyline.Event
mousemove 鼠标在折线上移动触发事件 e: AMap.Polyline.Event
dragstart 开始拖拽折线时触发事件 e: AMap.Polyline.Event
dragging 拖拽折线进行时触发事件 e: AMap.Polyline.Event
dragend 结束拖拽折线时触发事件 e: AMap.Polyline.Event

Circle 组件

Circle 组件是用于在地图上添加圆形的组件，它可以添加自定义的样式。

Props

名称 说明 类型
center 圆中心点经纬度，如 [116.405467,39.907761] Array<Number>
radius 圆半径，单位：米 Number
strokeColor 描边颜色，可选 argb、rgb、rrggbb、#rrggbb，如 #FF0000 String
fillColor 填充颜色，可选 argb、rgb、rrggbb、#rrggbb，如 #FF0000 String
strokeOpacity 线条透明度，范围为 0~1，0 表示完全透明，1 表示不透明 Number
strokeWeight 线条宽度，单位：像素 Number
fillOpacity 填充透明度，范围为 0~1，0 表示完全透明，1 表示不透明 Number
extData 用户自定义属性，支持 JavaScript 对象 Any
draggable 是否可拖拽，支持 PC 端和移动端 Boolean
clickable 是否可点击 Boolean

Methods

名称 说明 参数
getCenter 获取圆心经纬度 无
setCenter 设置圆心经纬度 center: Array<Number>
getRadius 获取圆的半径 无
setRadius 设置圆的半径 radius: Number
getBounds 获取当前圆的最小外接矩形 无
setOptions 设置圆的样式属性 options: Object

事件

名称 说明 参数
click 鼠标左键单击事件 e: AMap.Circle.Event
dblclick 鼠标左键双击事件 e: AMap.Circle.Event
rightclick 鼠标右键单击事件 e: AMap.Circle.Event
mouseover 鼠标移到圆内触发事件 e: AMap.Circle.Event
mouseout 鼠标从圆内移开触发事件 e: AMap.Circle.Event
mousedown 鼠标在圆内按下触发事件 e: AMap.Circle.Event
mouseup 鼠标在圆内松开触发事件 e: AMap.Circle.Event
mousemove 鼠标在圆内移动触发事件 e: AMap.Circle.Event
dragstart 开始拖拽圆形时触发事件 e: AMap.Circle.Event
dragging 拖拽圆形进行时触发事件 e: AMap.Circle.Event
dragend 结束拖拽圆形时触发事件 e: AMap.Circle.Event

BezierCurve 组件

BezierCurve 组件是用于在地图上添加贝塞尔曲线的组件，它可以自定义贝塞尔曲线的起点、终点和控制点，实现更为自由的曲线绘制。

Props

名称 说明 类型
path 贝塞尔曲线的节点坐标信息，三点曲线，经纬度数组，如 [[116.405467,39.907761], [116.406467,39.907761], [116.407467,39.909761]] Array<Array<Number>>
strokeColor 曲线

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e881e8991b448e0940

阅读全文

猜你喜欢

  • npm 包 kitty-fetch-file 使用教程

    在前端开发过程中，经常需要从服务器获取文件。这个过程可以使用传统的 AJAX 请求，但是在某些情况下，需要一种更便捷的方式来获取文件。这时，可以使用 npm 包 kitty-fetch-file 来实...

    3 年前
  • npm包lavas-cli使用教程

    随着前端技术的不断发展，越来越多的项目需要使用前端框架来构建。在项目开发过程中，我们通常需要使用一些前端工具来提高我们的开发效率和项目管理。lavas-cli是一个非常优秀的工具，可以帮助我们快速搭建...

    3 年前
  • npm 包 redux-error-snapshot-immutable 使用教程

    介绍 redux-error-snapshot-immutable 是一个针对 Redux 应用程序的 npm 包。它主要用于在 Redux 应用程序的开发过程中进行错误快照跟踪和恢复。

    3 年前
  • npm 包 map-object-facade 使用教程

    什么是 map-object-facade？ map-object-facade 是一个 npm 包，用于将对象属性映射到另一个对象上的工具包。它包含了许多方法，可以帮助你更方便地操作对象属性，并且可...

    3 年前
  • npm 包 loglevel-prefix 使用教程

    在前端开发中，我们经常需要在控制台输出调试信息以便我们的开发调试。而在日常的开发中，可能会有多个模块共同输出信息，并且我们可能需要针对不同的模块进行不同的调试等级，以及添加不同的前缀以便于我们更加清晰...

    3 年前
  • ng-deviceready npm 包使用教程

    在移动端开发中，deviceready 事件非常重要，因为只有在此事件触发后，我们才能安全的使用原生插件和访问设备硬件。ng-deviceready 是一个 AngularJS 模块，用于在 devi...

    3 年前
  • npm 包 conditional-console 使用教程

    前端开发过程中，console 是调试非常重要的工具之一。但是在生产环境中，不应该出现调试信息。在这种情况下，我们可以使用 npm 包 conditional-console 来优雅地进行 conso...

    3 年前
  • npm 包 redux-defmap 使用教程

    Redux-defmap 是一个基于 Redux 的状态管理库，它允许你在 Redux store 中使用类似于 JavaScript 对象的属性访问方式。这个库的灵感来自于 Immutable.js...

    3 年前
  • npm 包 skpm-builder 使用教程

    skpm-builder 是一个 npm 包, 它可以帮助前端开发者更方便地生成 Sketch 插件的脚手架。本文将详细介绍如何使用 skpm-builder. 什么是 skpm-builder? s...

    3 年前
  • npm 包 styled-system-fork 使用教程

    介绍 styled-system-fork 是一个基于 styled-components 和 styled-system 的 npm 包，它能够让我们编写 CSS 样式更加简便。

    3 年前
  • npm 包 @boxfoot/react-datepicker 使用教程

    在前端开发中，日期选择器是一个常用的组件。目前市面上有很多不错的日期选择器，其中 @boxfoot/react-datepicker 包是一个功能齐全且易于定制的日期选择器。

    3 年前
  • npm 包 themz 使用教程

    在现代的前端开发过程中，使用 npm 可以方便地管理 JavaScript 库和工具。themz 是一个非常实用的 npm 包，可以帮助我们快速设计和调整颜色主题。

    3 年前
  • npm 包 hansei-cafeteria 使用教程

    介绍 在前端开发中，我们经常需要使用各种各样的第三方工具库和插件来协助我们进行开发。而 npm 作为前端最常用的包管理工具之一，为我们提供了便捷的使用方式和海量的开源资源。

    3 年前
  • npm 包：babel-plugin-transform-console-log-variable-names 使用教程

    本文将介绍 npm 包 babel-plugin-transform-console-log-variable-names 的使用方法，以及其深度和学习意义，适合前端开发者学习使用。

    3 年前
  • npm 包 @creatartis/ludorum-game-reversi 使用教程

    什么是 @creatartis/ludorum-game-reversi @creatartis/ludorum-game-reversi 是一个基于 Node.js 的 npm 包，它提供了一个纯 ...

    3 年前
  • npm 包 react-portalizer 使用教程

    在前端开发中，我们经常会遇到需要在页面上弹出一个模态框或者弹窗的需求。这时候，我们可以使用一些开源的插件来快速实现，比如 react-portalizer。本文就来讲解一下如何使用这个 npm 包来实...

    3 年前
  • npm 包 justfake 使用教程

    什么是 justfake justfake 是一款允许开发者快速创建伪造数据的 npm 包，它的主要特点是： 简单易用 支持多种数据类型 完全自定义化 轻量级 不管是前端开发还是后端开发，我们如何...

    3 年前
  • npm 包 clock_puge 使用教程

    在前端开发中，我们经常需要创建各种倒计时功能。为了方便开发者， npm 社区中有许多优秀的倒计时插件。本文将介绍一款高度可定制的倒计时插件——clock_puge，该插件不仅可以实现简单的倒计时，还能...

    3 年前
  • npm 包 @specla/autoloader 使用教程

    在前端开发中，通常会用到一些依赖库和框架，而在这些依赖库和框架中，往往会有一些重复的代码和文件，这些重复的代码和文件会增加项目的体积和加载速度。为了解决这个问题，我们可以使用自动加载器来管理和加载这些...

    3 年前
  • npm 包 json-var-file 使用教程

    简介 npm 是 Node.js 的包管理器，在前端开发中，使用 npm 可以方便地安装和管理各种工具、框架和库。json-var-file 是一款 npm 包，它提供了对 JSON 文件的转换和扩展...

    3 年前

相关推荐

    暂无文章