在前端开发中，地图组件的应用已经越来越普遍，而国内市场中占有率较高的是百度地图和高德地图。但是在某些特殊场景下，我们需要使用其他地图，如韩国流行的daum地图。为了简化开发过程，我们可以使用npm包 daum-map-wrap来快速地在我们的项目中引入daum地图组件。
1. 安装npm包
使用npm安装daum-map-wrap，输入以下命令：
$ npm install daum-map-wrap
2. 引入daum-map-wrap
在HTML文件中引入daum-map-wrap：
<script src="https://apis.map.daum.net/web/maps/mapapi.js"></script> <script src="./node_modules/daum-map-wrap/dist/daum-map-wrap.umd.min.js"></script>
在Vue项目中引入daum-map-wrap：
import DaumMapWrap from 'daum-map-wrap' Vue.use(DaumMapWrap)
3. 创建地图
在HTML文件中：
<div id="map" style="width:500px;height:400px;"></div>
在Vue项目中：
-- -------------------- ---- -------
----------
-----
-------------- ---------------- -------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------- - ---- ---------- ---- ---------- --
------ --
-
-
-
---------4. 添加Marker
在HTML文件中：
-- -------------------- ---- -------
---- -------- ----------------------------------------
--------
------------------------------- ---------- -
----- --- - --- --------------------------------------------- -
------- --- --------------------------- ------------
------ -
--
----- -------------- - --- --------------------------- -----------
----- ------ - --- ------------------
--------- --------------
--
------------------
--
---------在Vue项目中：
-- -------------------- ---- -------
----------
-----
-------------- ---------------- ---------------
----------------- ----------------------------------------------
----------------
------
-----------
--------
------ ------- -
------ -
------ -
------- - ---- ---------- ---- ---------- --
------ --
--------------- - ---- ---------- ---- ---------- --
-
-
-
---------5. 添加InfoWindow
在HTML文件中：
-- -------------------- ---- -------
---- -------- ----------------------------------------
--------
------------------------------- ---------- -
----- --- - --- --------------------------------------------- -
------- --- --------------------------- ------------
------ -
--
----- -------------- - --- --------------------------- -----------
----- ------ - --- ------------------
--------- --------------
--
------------------
----- ------- - ----- -------------------------- -------------
----- ---------- - --- ----------------------
-------- --------
---------- -----
--------- --------------
--
----------------------------------- -------- ---------- -
-------------------- -------
--
--
---------在Vue项目中：
-- -------------------- ---- -------
----------
-----
-------------- ---------------- ---------------
----------------- ---------------------------
--------------------- ------------------ -----------------------------------------
-------------------
----------------
------
-----------
--------
------ ------- -
------ -
------ -
------- - ---- ---------- ---- ---------- --
------ --
--------------- - ---- ---------- ---- ---------- --
-------- ----- -------------------------- --------------
-
-
-
---------以上是使用npm包 daum-map-wrap实现daum地图组件的基本操作，希望可以给大家带来一定的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630381e8991b448e0df2