示例中心
功能在线体验
menu Created with Sketch. closed Created with Sketch.
您现在的位置: 开发 > 数据可视化 JS API > 参考手册 > Loca 容器 >

高德 开发 数据可视化 JS API 参考手册 Loca 容器

更新时间:2018年10月30日

1. 创建容器

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


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


使用范例

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

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

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

或 DOM 元素

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

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


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

// 已经加载过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?)

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()


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


3. 地图事件

方法

说明

on(<string> type, <Function> handler, <*> context?)

事件绑定

off(<string> type?, <Function> handler?, <*> context?)

事件解绑

once(<string> type, <Function> handler, <*> context?)

事件绑定,执行后解绑


自定义事件

类型

说明

mapload

Event

地图容器被加载完成时触发。参考示例



示例中心 功能
在线体验
常见问题