npm 包 evoweb-geoxml3 使用教程

阅读时长 11 分钟读完

简介

evoweb-geoxml3 是一款用于在 Google Maps 上展示 XML 文件的 npm 包。该包支持在 Google Maps 中显示标记点、折线、多边形等各种形状,并可通过自定义样式、信息窗口等展示更多信息。

安装

在使用 evoweb-geoxml3 之前,需要先在项目中安装该包。

使用

使用 evoweb-geoxml3,需要在页面中引入 Google Maps API,并将 evoweb-geoxml3 的依赖项添加到 package.json 文件中。

在脚本文件中,可以通过以下代码引入该包:

配置选项

在使用 evoweb-geoxml3 展示 XML 文件之前,需要配置以下选项:

  • map: 必选,谷歌地图的实例。
  • url: 必选,要加载的 XML 文件 URL 地址。
  • sidebarid: 选项,将右侧的 sidebar 包含在一个特定的 DIV(缺省为 "sidebar")中,以防冲突。

以下是一个简单的配置示例:

显示 XML 数据

使用 evoweb-geoxml3,可以在 Google Maps 上显示各种形状。可以通过以下配置来定义显示的形状类型:

  • markerOptions: 如果 XML 文件包含标记点,则可以在地图上显示标记点。示例配置:

    -- -------------------- ---- -------
    ----- ------- - -
      ---- ----
      ---- ----------------------------
      -------------- -
        ---------- ------
        ------- ----------------------------------------------
        ----- -------------------------------------------
      -
    --
  • polylineOptions: 如果 XML 文件包含线,则可以在地图上展示线。示例配置:

    -- -------------------- ---- -------
    ----- ------- - -
      ---- ----
      ---- ----------------------------
      ---------------- -
        ------------ -------
        -------------- ----
        ------------- -
      -
    --
  • polygonOptions: 如果 XML 文件包含多边形,则可以在地图上展示多边形。示例配置:

    -- -------------------- ---- -------
    ----- ------- - -
      ---- ----
      ---- ----------------------------
      --------------- -
        ---------- ------
        ---------- -------
        ------------ -----
        ------------ -------
        ------------- -
      -
    --
  • circleOptions: 如果 XML 文件包含圆,则可以在地图上展示圆形。示例配置:

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

自定义样式

使用 evoweb-geoxml3,可以完全自定义每个形状的样式。

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

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

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

通过 createMarkercreatePolylinecreatePolygon 等方法,可以自定义每个形状的样式。

展示信息窗口

使用 evoweb-geoxml3,可以展示信息窗口。示例代码:

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

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

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

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

实例代码

下面是一个完整的实例代码:

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

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

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

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

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

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

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

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

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

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

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

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

-------

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

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

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

-------

-------

结语

通过 evoweb-geoxml3,可以轻松在 Google Maps 中展示各种形状和信息窗口,实现更丰富的信息展示。希望这篇教程能够帮助您快速上手该 npm 包。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600668fbd9381d61a3541040

纠错
反馈