前言
在前端开发中，使用地图是一个经常遇到的需求。而在使用纯原生 API 开发地图应用时，需要处理很多底层细节，工作量较大，也容易出现各种问题。而一些流行的地图 API 产品，如高德、百度、谷歌等，使用起来简单方便，但很多情况下需要授权，不太方便在企业内部使用，也不方便在境外使用。
zimap 是一个全球免费的地图 API，适用于在境内外进行地图开发，对于地图的设计使用也理解比较透彻，与各种前端框架都有一定的配套操作，并且简单易用。它为您提供完整的 Web 地图开发解决方案，包括但不限于地图的散点、连线、航线、区域、热力图等。
安装
zimap 提供 npm 包，可以通过 npm 安装使用。它是一个基于浏览器的地图库，可以直接在浏览器中使用它：
npm install zimap
也可以通过 script 标签加载：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
------ ----------------
---------- -
------ -----
------- -----
------- - -----
-
--------
-------
------
---- ---------------------
------- --------------------------------------------------
--------
--- --- - ------------------------- -
------- ------------ ----------
----- --
---
---------
-------
-------快速入门
地图初始化
我们可以创建一个地图对象，设置地图容器的 ID 和地图的初始配置信息：
var map = zimap.create('container', {
zoom: 10,
center: [116.397428, 39.90923]
});其中，container 是指定的容器 ID，zoom 是地图的缩放级别，center 是地图的中心点。
地图控件
zimap 包含多个内置控件，如比例尺、缩放控制、地图类型控制等，我们可以通过 map.addControl 函数添加这些控件。比如我们添加一个全屏控件：
map.addControl(new zimap.FullScreenControl());
标记 Marker
在地图上添加标记对象：
var marker = new zimap.Marker({
position: [116.397428, 39.90923],
map: map,
title: '这是一个标记'
});其中，position 是标记的坐标，map 是标注所在的地图对象，title 是标记的标题。
折线 Polyline
在地图上添加折线：
-- -------------------- ---- -------
--- -------- - --- ----------------
----- -
------------ -----------
------------ -----------
------------ -----------
------------ --------
--
------------ ----------
-------------- ----
------------- --
---- ---
---多边形 Polygon
在地图上添加多边形：
-- -------------------- ---- -------
--- ------- - --- ---------------
------ -
------------ -----------
------------ -----------
------------ -----------
------------ --------
--
------------ ----------
-------------- ----
------------- --
---------- ----------
------------ -----
---- ---
---地图事件
zimap 支持多种地图事件：
marker.on('click', function () {
alert('点击了标记！');
});总结
在使用 zimap 时，我们可以快速构建一个扁平简单的地图，而且可以自定义某些样式和交互效果。总的来说，zimap 是一个相对简单易用的全球免费的地图 API，可以完全满足初学者和业务需求较简单的开发者。同时也可以通过源码深入了解地图的底层实现原理，有助于提高自己的技术储备。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d181e8991b448d2049