Loca 容器最后更新时间: 2021年01月22日

1. 创建容器

用于创建地图容器，或关联已有地图。

Tips: Loca 既是容器构造函数，又是命名空间，在使用时请开发者注意。此外创建实例都提供了 工厂方法 和 new 函数 两种方式，文档中例子选择工厂方法创建。开发者可以自行选择。

使用范例

例子1：指定地图容器 ID，自动加载 JS API。

// 工厂方法构造
var locaMap = Loca.create('container', {
    zoom: 4
});

// new 函数构造
var locaMap = new Loca('container', {
    zoom: 4
});

或 DOM 元素

JavaScript

var el = document.getElementById('container');
// 工厂方法构造
var locaMap = Loca.create(el, {
    zoom: 4
});

// new 函数构造
var locaMap = new Loca(el, {
    zoom: 4
});

例子2：已存在 AMap.Map 实例，直接指定实例创建。

JavaScript

// 已经加载过JS API
var map = new AMap.Map('container', {
    zoom: 4
});
// 工厂方法构造
var locaMap = Loca.create(map);

// new 函数构造
var locaMap = new Loca(map);

参考手册

Loca 容器类，提供基本的底图创建功能。参考示例

构造函数 / 工厂方法	说明
new Loca(`<string\|HTMLElement>` dom, `<MapOptions>` options?)	创建一个基于高德 AMap 的可视化地图实例，可以通过 Dom ID 或者 Dom 元素本身创建。
Loca.create(`<string\|HTMLElement>`dom, `<MapOptions>`options?)	创建一个基于高德 AMap 的可视化地图实例，可以通过 Dom ID 或者 Dom 元素本身创建。
new Loca(`<AMap.Map>` map, `<MapOptions>` options?)	在已存在 AMap 实例的情况下，也可以传入已存在的 `AMap.Map` 实例，Loca 会在完全不影响原地图的情况下，绘制你要的可视化图层。
Loca.create(`<AMap.Map>` map, `<MapOptions>` options?)

支持 AMap.Map 的全部 options 配置，如果在已创建的 AMap 上创建，则 AMap 相关 options 会被忽略。

MapOptions	类型	默认值	说明
viewMode	string	3D	地图原有属性。地图模式，支持 2D / 3D 类型。建议使用 3D 模式，2D 模式在 v1.2.0 以后将不再升级维护。
pitch	number	0	地图原有属性。俯仰角度，默认 0，2D 地图下无效。
version	string		选择 JS API 版本，默认为空，选择当前最新版。如果页面已引入 JS API，该属性无效。
eventSupport	boolean	true	是否响应内部所有图层的鼠标事件。使用 `VisualLayer` 时，需要同时开启 `VisualLayer` 的 eventSupport 才可以使用事件。如果需要关闭所有图层的事件响应，可以直接设置为 false。
mapStyle	string		地图样式，地图原有属性。建议开发者搭配适合的底图颜色，以达到更好的可视化效果。可参考自定义地图的使用方法。

2. 基本方法

Loca 的基本操作。

方法	返回	说明
getMap()	AMap.Map	返回 `AMap.Map` 地图实例，可以直接对底图的操作。注意：由于 AMap 是被异步加载的，因此 getMap() 需要在 mapload 事件后调用才可以正确取到地图实例。参考示例
destroy()		析构函数，将底图及图层全部销毁。

方法

说明

getMap()

AMap.Map

返回 AMap.Map 地图实例，可以直接对底图的操作。

注意：由于 AMap 是被异步加载的，因此 getMap() 需要在 mapload 事件后调用才可以正确取到地图实例。

参考示例

destroy()

析构函数，将底图及图层全部销毁。

3. 地图事件

方法	说明
on(`<string>` type, `<Function>` handler, `<*>` context?)	事件绑定
off(`<string>` type?, `<Function>` handler?, `<*>` context?)	事件解绑
once(`<string>` type, `<Function>` handler, `<*>` context?)	事件绑定，执行后解绑