html调用显示高德地图,快速上手-数据可视化 JS API | 高德地图API

接下来我们通过一个简单的例子：『将已有的全国市县位置数据，用圆形标记在地图上』，来快速了解下 Loca 的用法吧。

1. 申请开发者 KEY

使用前，请您先申请开发者 Key，这里您可以和 JS-API 共用同一个开发者 Key。

2. 引入

Loca 依赖 JS-API，因此首先需要加载 JS-API，再引入 Loca。其中开发者 key 和版本号 v 必填。

其中参数key必须填写您申请的开发者 Key，参数v则指定版本号，

通过上述方式的引入，Loca 变量会注入到全局变量中。

3. 创建地图实例

在使用地图前，我们需要创建一个容器用于显示地图底图，这一步和 JS-API 一样，通过 AMap.Map创建。

const map = new AMap.Map('map', {

mapStyle: 'amap://styles/grey',

zoom: 5,

center: [107.4976,32.1697]

});

例子中，我们配置了 3 个属性：地图样式 mapStyle、初始缩放等级 zoom 和初始地图中心点 center。

关于更多的配置项，可以参考 API文档和 教程例子，这里不再赘述。

执行完上面的代码，一个地图底图便创建好了，如下图所示：