syncfusion-angular-maps

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Maps

实现Syncfusion Angular Maps

Comprehensive guide for implementing the Syncfusion Angular Maps component to visualize geographical data with interactive features, multiple layers, and rich customization options.

本指南全面介绍如何实现Syncfusion Angular Maps组件，以具备交互功能、多层级和丰富自定义选项的方式可视化地理数据。

When to Use This Skill

适用场景

Use this skill when you need to:

Visualize geographical data - Display statistical data on world maps, country maps, regional maps, or custom geographic shapes
Create interactive maps - Build maps with zoom, pan, selection, highlighting, and tooltip interactions
Plot locations - Add markers, bubbles, or annotations to highlight specific geographic points
Display map layers - Work with multiple overlapping layers using GeoJSON data or map providers (Bing, OpenStreetMap, Azure)
Color-code regions - Apply color mapping based on data values for choropleth/heat map visualizations
Custom map visualizations - Create non-geographic visualizations like seat layouts, floor plans, or stadium maps
Navigation and routing - Draw navigation lines or routes between markers
Export and print maps - Generate printable or exportable map visualizations
Build dashboards - Integrate maps into Angular applications for business intelligence or analytics

在以下场景中可使用此技能：

可视化地理数据 - 在世界地图、国家地图、区域地图或自定义地理形状上展示统计数据
创建交互式地图 - 构建具备缩放、平移、选择、高亮和提示框交互功能的地图
标记位置 - 添加标记、气泡或注释以突出显示特定地理点
显示地图图层 - 使用GeoJSON数据或地图提供商（Bing、OpenStreetMap、Azure）处理多个重叠图层
区域颜色编码 - 基于数据值应用颜色映射，实现分级统计图/热力图可视化
自定义地图可视化 - 创建非地理可视化效果，如座位布局、楼层平面图或体育场地图
导航与路线规划 - 在标记之间绘制导航线路或路线
导出与打印地图 - 生成可打印或可导出的地图可视化效果
构建仪表盘 - 将地图集成到Angular应用中，用于商业智能或分析

Component Overview

组件概述

The Syncfusion Angular Maps component (

@syncfusion/ej2-angular-maps

) is a powerful data visualization tool that renders geographical data using Scalable Vector Graphics (SVG). It supports:

Multiple layers and sublayers for complex visualizations
GeoJSON data binding for custom shapes and regions
Map providers (Bing Maps, OpenStreetMap, Azure Maps) as base layers
Six projection types (Mercator, Equirectangular, Miller, Eckert3, Eckert5, Eckert6, Winkel3, AitOff)
Rich visualization elements - markers, bubbles, data labels, legends, navigation lines, annotations
Interactive features - zooming, panning, tooltips, selection, highlighting
Responsive and accessible design with WCAG compliance

Syncfusion Angular Maps组件（

@syncfusion/ej2-angular-maps

）是一款强大的数据可视化工具，使用可缩放矢量图形（SVG）渲染地理数据。它支持：

用于复杂可视化的多层级和子图层
用于自定义形状和区域的GeoJSON数据绑定
作为基础图层的地图提供商（Bing Maps、OpenStreetMap、Azure Maps）
八种投影类型（墨卡托、等矩形、米勒、埃克特3、埃克特5、埃克特6、温克尔3、艾托夫）
丰富的可视化元素 - 标记、气泡、数据标签、图例、导航线路、注释
交互功能 - 缩放、平移、提示框、选择、高亮
符合WCAG标准的响应式与无障碍设计

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速开始

📄 Read: references/getting-started.md

When implementing Maps for the first time or setting up a new Angular project:

Installing dependencies (@syncfusion/ej2-angular-maps package)
Setting up Angular environment and importing MapsModule
Creating first basic map with world map data
Understanding module injection for features (MarkerService, BubbleService, etc.)
Adding CSS themes and styling
Running the application

📄 阅读： references/getting-started.md

首次实现Maps或设置新Angular项目时：

安装依赖（
```
@syncfusion/ej2-angular-maps
```
包）
设置Angular环境并导入MapsModule
使用世界地图数据创建第一个基础地图
理解功能的模块注入（MarkerService、BubbleService等）
添加CSS主题与样式
运行应用

Layers and Data Binding

图层与数据绑定

📄 Read: references/layers-and-data.md

For working with map layers, shape data, and data source binding:

Understanding layer structure and configuration
Loading GeoJSON shape data (shapeData property)
Binding external data sources (dataSource, shapeDataPath, shapePropertyPath)
Creating multiple layers and sublayers
Layer types (base layer vs sublayer)
Switching between layers (baseLayerIndex)
Rendering custom shapes for non-geographic visualizations
GeometryType options (Geographic vs Normal)

📄 阅读： references/layers-and-data.md

处理地图图层、形状数据和数据源绑定时：

理解图层结构与配置
加载GeoJSON形状数据（shapeData属性）
绑定外部数据源（dataSource、shapeDataPath、shapePropertyPath）
创建多个图层和子图层
图层类型（基础图层 vs 子图层）
在图层之间切换（baseLayerIndex）
为非地理可视化渲染自定义形状
GeometryType选项（地理类型 vs 普通类型）

Markers

标记

📄 Read: references/markers.md

For adding and customizing location markers:

Adding markers with latitude/longitude data
Marker shapes (Balloon, Circle, Cross, Diamond, Image, Rectangle, Star, Triangle)
Custom marker templates
Marker styling (size, color, border, opacity)
Dynamic markers with data binding
Marker clustering
Marker animations and transitions
Marker tooltips and events
Creating routes between markers

📄 阅读： references/markers.md

添加和自定义位置标记时：

使用经纬度数据添加标记
标记形状（气球形、圆形、十字形、菱形、图像、矩形、星形、三角形）
自定义标记模板
标记样式（大小、颜色、边框、透明度）
带数据绑定的动态标记
标记聚类
标记动画与过渡效果
标记提示框与事件
在标记之间创建路线

Data Visualization Features

数据可视化功能

📄 Read: references/data-visualization.md

For visualizing data with bubbles, colors, labels, and legends:

Bubbles - Size-based visualization for quantitative data
Color mapping - Range color mapping, equal color mapping, desaturation color mapping
Data labels - Displaying shape names or data values on the map
Legends - Adding legends for color mapping and bubbles
Navigation lines - Drawing lines between locations
Annotations - Adding custom HTML content at specific positions
Combining multiple visualization features

📄 阅读： references/data-visualization.md

使用气泡、颜色、标签和图例可视化数据时：

气泡 - 基于大小的定量数据可视化
颜色映射 - 范围颜色映射、等值颜色映射、去饱和颜色映射
数据标签 - 在地图上显示形状名称或数据值
图例 - 为颜色映射和气泡添加图例
导航线路 - 在位置之间绘制线路
注释 - 在特定位置添加自定义HTML内容
组合多种可视化功能

User Interactions

用户交互

📄 Read: references/user-interactions.md

For implementing interactive map behaviors:

Zooming - Mouse wheel zoom, pinch zoom, double-click zoom, zoom toolbar
Panning - Mouse drag and touch panning
Tooltips - Layer tooltips, marker tooltips, bubble tooltips
Selection - Shape selection, marker selection, bubble selection
Highlighting - Hover highlight effects
Interactive legend - Clicking legend items to show/hide shapes
Event handling (click, hover, zoom, pan events)
Touch and mobile support

📄 阅读： references/user-interactions.md

实现交互式地图行为时：

缩放 - 鼠标滚轮缩放、捏合缩放、双击缩放、缩放工具栏
平移 - 鼠标拖拽和触摸平移
提示框 - 图层提示框、标记提示框、气泡提示框
选择 - 形状选择、标记选择、气泡选择
高亮 - 悬停高亮效果
交互式图例 - 点击图例项显示/隐藏形状
事件处理（点击、悬停、缩放、平移事件）
触摸与移动端支持

Map Providers

地图提供商

📄 Read: references/map-providers.md

For integrating external map services:

Overview of map provider support
Bing Maps integration and API key configuration
OpenStreetMap (OSM) integration
Azure Maps integration
Provider-specific features and limitations
Combining map providers with shape layers
URL templates and tile services
Zoom level configuration

📄 阅读： references/map-providers.md

集成外部地图服务时：

地图提供商支持概述
Bing Maps集成与API密钥配置
OpenStreetMap（OSM）集成
Azure Maps集成
提供商特定功能与限制
将地图提供商与形状图层结合
URL模板与瓦片服务
缩放级别配置

Polygon Shapes

多边形形状

📄 Read: references/polygon-shapes.md

For drawing and customizing polygons:

Adding polygon overlays to maps
Polygon configuration and data structure
Styling polygons (fill, border, opacity)
Polygon events (click, hover)
Use cases (highlighting regions, boundaries, zones)
Dynamic polygon rendering

📄 阅读： references/polygon-shapes.md

绘制和自定义多边形时：

向地图添加多边形覆盖层
多边形配置与数据结构
多边形样式（填充、边框、透明度）
多边形事件（点击、悬停）
用例（突出显示区域、边界、区域）
动态多边形渲染

Customization and Styling

自定义与样式

📄 Read: references/customization.md

For theming and visual customization:

Built-in themes (Material, Bootstrap, Fabric, Tailwind, etc.)
CSS customization and theme overrides
Shape styling (fill, border, color schemes)
Responsive design patterns
Map projections - Choosing and configuring projection types
Background customization (colors, images)
Title and subtitle styling
Border and margin configuration

📄 阅读： references/customization.md

主题与视觉自定义时：

内置主题（Material、Bootstrap、Fabric、Tailwind等）
CSS自定义与主题覆盖
形状样式（填充、边框、配色方案）
响应式设计模式
地图投影 - 选择和配置投影类型
背景自定义（颜色、图像）
标题与副标题样式
边框与边距配置

Localization and Internationalization

本地化与国际化

📄 Read: references/localization.md

For globalizing map content:

Internationalization (i18n) setup
Localization (l10n) for different languages
Right-to-left (RTL) support
Number formatting for different locales
Currency formatting in tooltips/labels
Date and time formatting
Culture-specific rendering

📄 阅读： references/localization.md

全球化地图内容时：

国际化（i18n）设置
多语言本地化（l10n）
从右到左（RTL）支持
不同区域的数字格式化
提示框/标签中的货币格式化
日期与时间格式化
特定文化的渲染

Advanced Features

高级功能

📄 Read: references/advanced-features.md

For advanced capabilities and APIs:

Print and Export - Printing maps, exporting to PNG/JPEG/SVG/PDF
State persistence - Saving and restoring map state
Public methods - Programmatic control (refresh, print, export, etc.)
Events reference - Complete list of available events
Creating routes - Drawing navigation routes between markers
Custom path rendering - Advanced path and line customization
Drilldown navigation - Creating hierarchical map navigation

📄 阅读： references/advanced-features.md

使用高级功能与API时：

打印与导出 - 打印地图、导出为PNG/JPEG/SVG/PDF
状态持久化 - 保存与恢复地图状态
公共方法 - 程序化控制（刷新、打印、导出等）
事件参考 - 完整的可用事件列表
创建路线 - 在标记之间绘制导航路线
自定义路径渲染 - 高级路径与线路自定义
钻取导航 - 创建分层地图导航

Accessibility

无障碍访问

📄 Read: references/accessibility.md

For accessible map implementations:

WCAG 2.1 compliance guidelines
Keyboard navigation support
ARIA attributes and roles
Screen reader compatibility
High contrast theme support
Focus indicators and management
Alternative text for shapes and markers

📄 阅读： references/accessibility.md

实现无障碍地图时：

WCAG 2.1合规指南
键盘导航支持
ARIA属性与角色
屏幕阅读器兼容性
高对比度主题支持
焦点指示器与管理
形状与标记的替代文本

Quick Start

快速开始

Installation

安装

bash

undefined

bash

undefined

Install the Maps package

npm install @syncfusion/ej2-angular-maps --save

undefined

npm install @syncfusion/ej2-angular-maps --save

undefined

Basic Implementation

基础实现

typescript

import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map'; // GeoJSON data

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <e-layer [shapeData]='shapeData'></e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
}

typescript

import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map'; // GeoJSON data

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <e-layer [shapeData]='shapeData'></e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
}

With Data Binding and Color Mapping

带数据绑定与颜色映射的实现

typescript

import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <e-layer 
          [shapeData]='shapeData'
          [dataSource]='dataSource'
          shapeDataPath='Country'
          shapePropertyPath='name'
          [shapeSettings]='shapeSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
  
  public dataSource: object[] = [
    { Country: 'United States', Population: 331002651, Code: 'US' },
    { Country: 'India', Population: 1380004385, Code: 'IN' },
    { Country: 'China', Population: 1439323776, Code: 'CN' }
  ];
  
  public shapeSettings: object = {
    colorValuePath: 'Population',
    colorMapping: [
      { from: 0, to: 100000000, color: '#C5E8B7' },
      { from: 100000001, to: 500000000, color: '#5BC85A' },
      { from: 500000001, to: 2000000000, color: '#238B45' }
    ]
  };
}

typescript

import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <e-layer 
          [shapeData]='shapeData'
          [dataSource]='dataSource'
          shapeDataPath='Country'
          shapePropertyPath='name'
          [shapeSettings]='shapeSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
  
  public dataSource: object[] = [
    { Country: 'United States', Population: 331002651, Code: 'US' },
    { Country: 'India', Population: 1380004385, Code: 'IN' },
    { Country: 'China', Population: 1439323776, Code: 'CN' }
  ];
  
  public shapeSettings: object = {
    colorValuePath: 'Population',
    colorMapping: [
      { from: 0, to: 100000000, color: '#C5E8B7' },
      { from: 100000001, to: 500000000, color: '#5BC85A' },
      { from: 500000001, to: 2000000000, color: '#238B45' }
    ]
  };
}

Common Patterns

常见模式

Pattern 1: Map with Markers and Tooltips

模式1：带标记与提示框的地图

typescript

import { Component } from '@angular/core';
import { MapsModule, MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  providers: [MarkerService, MapsTooltipService],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <e-layer 
          [shapeData]='shapeData'
          [markerSettings]='markerSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
  
  public markerSettings: object[] = [{
    visible: true,
    dataSource: [
      { latitude: 40.7128, longitude: -74.0060, name: 'New York' },
      { latitude: 51.5074, longitude: -0.1278, name: 'London' },
      { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' }
    ],
    shape: 'Circle',
    fill: '#FF6347',
    height: 15,
    width: 15,
    tooltipSettings: {
      visible: true,
      valuePath: 'name'
    }
  }];
}

typescript

import { Component } from '@angular/core';
import { MapsModule, MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  providers: [MarkerService, MapsTooltipService],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <e-layer 
          [shapeData]='shapeData'
          [markerSettings]='markerSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
  
  public markerSettings: object[] = [{
    visible: true,
    dataSource: [
      { latitude: 40.7128, longitude: -74.0060, name: 'New York' },
      { latitude: 51.5074, longitude: -0.1278, name: 'London' },
      { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' }
    ],
    shape: 'Circle',
    fill: '#FF6347',
    height: 15,
    width: 15,
    tooltipSettings: {
      visible: true,
      valuePath: 'name'
    }
  }];
}

Pattern 2: Interactive Map with Zoom and Legend

模式2：带缩放与图例的交互式地图

typescript

import { Component } from '@angular/core';
import { MapsModule, ZoomService, LegendService } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  providers: [ZoomService, LegendService],
  template: `
    <ejs-maps 
      id='maps-container'
      [zoomSettings]='zoomSettings'
      [legendSettings]='legendSettings'>
      <e-layers>
        <e-layer 
          [shapeData]='shapeData'
          [dataSource]='dataSource'
          shapeDataPath='Country'
          shapePropertyPath='name'
          [shapeSettings]='shapeSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
  
  public dataSource: object[] = [
    { Country: 'United States', Category: 'High' },
    { Country: 'Canada', Category: 'Medium' },
    { Country: 'Mexico', Category: 'Low' }
  ];
  
  public shapeSettings: object = {
    colorValuePath: 'Category',
    colorMapping: [
      { value: 'High', color: '#E74C3C' },
      { value: 'Medium', color: '#F39C12' },
      { value: 'Low', color: '#27AE60' }
    ]
  };
  
  public zoomSettings: object = {
    enable: true,
    toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
  };
  
  public legendSettings: object = {
    visible: true,
    position: 'Bottom'
  };
}

typescript

import { Component } from '@angular/core';
import { MapsModule, ZoomService, LegendService } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  providers: [ZoomService, LegendService],
  template: `
    <ejs-maps 
      id='maps-container'
      [zoomSettings]='zoomSettings'
      [legendSettings]='legendSettings'>
      <e-layers>
        <e-layer 
          [shapeData]='shapeData'
          [dataSource]='dataSource'
          shapeDataPath='Country'
          shapePropertyPath='name'
          [shapeSettings]='shapeSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public shapeData: object = world_map;
  
  public dataSource: object[] = [
    { Country: 'United States', Category: 'High' },
    { Country: 'Canada', Category: 'Medium' },
    { Country: 'Mexico', Category: 'Low' }
  ];
  
  public shapeSettings: object = {
    colorValuePath: 'Category',
    colorMapping: [
      { value: 'High', color: '#E74C3C' },
      { value: 'Medium', color: '#F39C12' },
      { value: 'Low', color: '#27AE60' }
    ]
  };
  
  public zoomSettings: object = {
    enable: true,
    toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
  };
  
  public legendSettings: object = {
    visible: true,
    position: 'Bottom'
  };
}

Pattern 3: Multi-Layer Map with Sublayers

模式3：带子图层的多层级地图

typescript

import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
import { usa_map } from './usa-map';
import { california } from './california';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <!-- Base layer -->
        <e-layer 
          [shapeData]='usaMap'
          [shapeSettings]='baseShapeSettings'>
        </e-layer>
        
        <!-- Sublayer highlighting California -->
        <e-layer 
          type='SubLayer'
          [shapeData]='californiaMap'
          [shapeSettings]='sublayerShapeSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public usaMap: object = usa_map;
  public californiaMap: object = california;
  
  public baseShapeSettings: object = {
    fill: '#E5E5E5',
    border: { color: '#000000', width: 0.5 }
  };
  
  public sublayerShapeSettings: object = {
    fill: '#FFD700',
    border: { color: '#FF6347', width: 2 }
  };
}

typescript

import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
import { usa_map } from './usa-map';
import { california } from './california';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MapsModule],
  template: `
    <ejs-maps id='maps-container'>
      <e-layers>
        <!-- Base layer -->
        <e-layer 
          [shapeData]='usaMap'
          [shapeSettings]='baseShapeSettings'>
        </e-layer>
        
        <!-- Sublayer highlighting California -->
        <e-layer 
          type='SubLayer'
          [shapeData]='californiaMap'
          [shapeSettings]='sublayerShapeSettings'>
        </e-layer>
      </e-layers>
    </ejs-maps>
  `
})
export class AppComponent {
  public usaMap: object = usa_map;
  public californiaMap: object = california;
  
  public baseShapeSettings: object = {
    fill: '#E5E5E5',
    border: { color: '#000000', width: 0.5 }
  };
  
  public sublayerShapeSettings: object = {
    fill: '#FFD700',
    border: { color: '#FF6347', width: 2 }
  };
}

Key Configuration Options

关键配置选项

Layer Settings

图层设置

```
shapeData
```
- GeoJSON data for shapes
```
dataSource
```
- External data to bind
```
shapeDataPath
```
- Field in dataSource identifying shape
```
shapePropertyPath
```
- Field in shapeData matching dataSource
```
shapeSettings
```
- Visual styling for shapes
```
type
```
- Layer type ('Layer' or 'SubLayer')

```
shapeData
```
- 形状的GeoJSON数据
```
dataSource
```
- 要绑定的外部数据
```
shapeDataPath
```
- 数据源中标识形状的字段
```
shapePropertyPath
```
- shapeData中与数据源匹配的字段
```
shapeSettings
```
- 形状的视觉样式
```
type
```
- 图层类型（'Layer'或'SubLayer'）

Shape Settings

形状设置

```
fill
```
- Shape fill color
```
border
```
- Border configuration (color, width, opacity)
```
colorValuePath
```
- Data field for color mapping
```
colorMapping
```
- Array of color ranges or values
```
autofill
```
- Auto-generate colors for shapes

```
fill
```
- 形状填充颜色
```
border
```
- 边框配置（颜色、宽度、透明度）
```
colorValuePath
```
- 用于颜色映射的数据字段
```
colorMapping
```
- 颜色范围或值的数组
```
autofill
```
- 自动为形状生成颜色

Marker Settings

标记设置

```
visible
```
- Show/hide markers
```
dataSource
```
- Marker data with latitude/longitude
```
shape
```
- Marker shape type
```
height
```
/
```
width
```
- Marker dimensions
```
template
```
- Custom HTML template
```
tooltipSettings
```
- Marker tooltip configuration

```
visible
```
- 显示/隐藏标记
```
dataSource
```
- 包含经纬度的标记数据
```
shape
```
- 标记形状类型
```
height
```
/
```
width
```
- 标记尺寸
```
template
```
- 自定义HTML模板
```
tooltipSettings
```
- 标记提示框配置

Zoom Settings

缩放设置

```
enable
```
- Enable/disable zooming
```
zoomFactor
```
- Initial zoom level
```
maxZoom
```
/
```
minZoom
```
- Zoom limits
```
toolbars
```
- Zoom control buttons
```
mouseWheelZoom
```
- Enable mouse wheel zooming
```
pinchZooming
```
- Enable touch pinch zoom

```
enable
```
- 启用/禁用缩放
```
zoomFactor
```
- 初始缩放级别
```
maxZoom
```
/
```
minZoom
```
- 缩放限制
```
toolbars
```
- 缩放控制按钮
```
mouseWheelZoom
```
- 启用鼠标滚轮缩放
```
pinchZooming
```
- 启用触摸捏合缩放

Legend Settings

图例设置

```
visible
```
- Show/hide legend
```
position
```
- Legend placement (Top, Bottom, Left, Right)
```
mode
```
- Legend mode ('Default', 'Interactive')
```
type
```
- Legend type ('Layers', 'Bubbles', 'Markers')

```
visible
```
- 显示/隐藏图例
```
position
```
- 图例位置（顶部、底部、左侧、右侧）
```
mode
```
- 图例模式（'Default'、'Interactive'）
```
type
```
- 图例类型（'Layers'、'Bubbles'、'Markers'）

Common Use Cases

常见用例

Use Case 1: Sales Dashboard by Region

用例1：按区域划分的销售仪表盘

Create choropleth maps showing sales data across countries or states with color-coded regions, interactive tooltips, and legends. Useful for business intelligence dashboards.

创建分级统计图，显示不同国家或州的销售数据，带有颜色编码区域、交互式提示框和图例。适用于商业智能仪表盘。

Use Case 2: Store Locator Map

用例2：门店定位地图

Display store locations with custom marker icons, clustering for dense areas, and tooltips showing store details. Integrate with map providers for street-level detail.

显示门店位置，使用自定义标记图标、密集区域聚类，以及显示门店详情的提示框。与地图提供商集成以获取街道级细节。

Use Case 3: Election Results Visualization

用例3：选举结果可视化

Show election results across districts/states using color mapping, with drilldown capability to explore detailed regional data.

使用颜色映射显示不同地区/州的选举结果，具备钻取功能以探索详细的区域数据。

Use Case 4: Real-time Tracking Dashboard

用例4：实时跟踪仪表盘

Plot vehicle, shipment, or asset locations with animated markers, navigation lines showing routes, and real-time data updates.

使用动画标记绘制车辆、货物或资产位置，显示路线的导航线路，以及实时数据更新。

Use Case 5: Weather or Environmental Data

用例5：天气或环境数据

Visualize temperature, rainfall, air quality, or other environmental metrics using color gradients and data labels on geographic regions.

在地理区域上使用颜色渐变和数据标签可视化温度、降雨量、空气质量或其他环境指标。

Use Case 6: COVID-19 or Disease Spread Tracking

用例6：COVID-19或疾病传播跟踪

Display case counts, vaccination rates, or infection rates by region using bubble sizes and color intensity.

使用气泡大小和颜色强度显示各地区的病例数、疫苗接种率或感染率。

Use Case 7: Flight Route Visualization

用例7：飞行路线可视化

Show flight paths between cities using navigation lines, with markers for airports and interactive selection.

使用导航线路显示城市之间的飞行路径，带有机场标记和交互式选择功能。

Use Case 8: Custom Seating Layouts

用例8：自定义座位布局

Use custom GeoJSON shapes for non-geographic visualizations like seat selection in theaters, stadiums, or transportation.

使用自定义GeoJSON形状创建非地理可视化效果，如剧院、体育场或交通工具的座位选择。

Module Injection Requirements

模块注入要求

The Maps component uses feature-specific services that must be injected:

typescript

import { 
  MapsModule,
  MarkerService,          // For markers
  BubbleService,          // For bubbles
  DataLabelService,       // For data labels
  LegendService,          // For legends
  MapsTooltipService,     // For tooltips
  ZoomService,            // For zoom and pan
  SelectionService,       // For selection
  HighlightService,       // For highlighting
  NavigationLineService,  // For navigation lines
  AnnotationsService,     // For annotations
  PolygonService          // For polygons
} from '@syncfusion/ej2-angular-maps';

@Component({
  providers: [
    MarkerService,
    LegendService,
    MapsTooltipService,
    ZoomService
    // Add only the services you need
  ]
})

Maps组件使用特定功能的服务，必须进行注入：

typescript

import { 
  MapsModule,
  MarkerService,          // For markers
  BubbleService,          // For bubbles
  DataLabelService,       // For data labels
  LegendService,          // For legends
  MapsTooltipService,     // For tooltips
  ZoomService,            // For zoom and pan
  SelectionService,       // For selection
  HighlightService,       // For highlighting
  NavigationLineService,  // For navigation lines
  AnnotationsService,     // For annotations
  PolygonService          // For polygons
} from '@syncfusion/ej2-angular-maps';

@Component({
  providers: [
    MarkerService,
    LegendService,
    MapsTooltipService,
    ZoomService
    // Add only the services you need
  ]
})

API Reference Documentation

API参考文档

Complete API Catalog

完整API目录

📘 Full API Reference Guide - Comprehensive documentation of all Maps APIs

📘 完整API参考指南 - 所有Maps API的综合文档

Quick API Links by Category

按类别划分的快速API链接

Core Component

核心组件

MapsComponent - Main maps component with 20+ properties and methods
print() - Print functionality
export() - Export to Image/PDF
refresh() - Refresh map
addLayer() - Add layer dynamically

MapsComponent - 主地图组件，包含20+属性和方法
print() - 打印功能
export() - 导出为图像/PDF
refresh() - 刷新地图
addLayer() - 动态添加图层

Layer Configuration

图层配置

LayerSettings - Layer configuration model
ShapeSettings - Shape styling configuration
shapeData - GeoJSON shape data
dataSource - External data binding

LayerSettings - 图层配置模型
ShapeSettings - 形状样式配置
shapeData - GeoJSON形状数据
dataSource - 外部数据绑定

Markers & Bubbles

标记与气泡

MarkerSettings - Marker configuration
BubbleSettings - Bubble visualization
DataLabelSettings - Data labels

MarkerSettings - 标记配置
BubbleSettings - 气泡可视化
DataLabelSettings - 数据标签

User Interactions

用户交互

ZoomSettings - Zoom and pan configuration
TooltipSettings - Tooltip configuration
SelectionSettings - Selection behavior
HighlightSettings - Highlight behavior

ZoomSettings - 缩放与平移配置
TooltipSettings - 提示框配置
SelectionSettings - 选择行为
HighlightSettings - 高亮行为

Customization

自定义

LegendSettings - Legend configuration
ColorMappingSettings - Color mapping for choropleth
NavigationLineSettings - Navigation lines
Annotation - Custom annotations

LegendSettings - 图例配置
ColorMappingSettings - 分级统计图的颜色映射
NavigationLineSettings - 导航线路
Annotation - 自定义注释

Key Events (25+ Total)

关键事件（共25+）

load - Before map loads
loaded - After map loads
shapeSelected - Shape selection event
markerClick - Marker click event
zoom - Zoom event
pan - Pan event

load - 地图加载前
loaded - 地图加载后
shapeSelected - 形状选择事件
markerClick - 标记点击事件
zoom - 缩放事件
pan - 平移事件

Enumerations

枚举

ProjectionType - Map projection types (Mercator, Miller, Eckert, etc.)
MarkerType - Marker shapes (Balloon, Circle, Diamond, etc.)
LayerType - Layer vs SubLayer
GeometryType - Geographic vs Normal

ProjectionType - 地图投影类型（墨卡托、米勒、埃克特等）
MarkerType - 标记形状（气球形、圆形、菱形等）
LayerType - 图层 vs 子图层
GeometryType - 地理类型 vs 普通类型

Event Interfaces

事件接口

ILoadEventArgs - Load event arguments
IShapeSelectedEventArgs - Selection event args
IMarkerClickEventArgs - Marker click args

ILoadEventArgs - 加载事件参数
IShapeSelectedEventArgs - 选择事件参数
IMarkerClickEventArgs - 标记点击事件参数

Context-Specific API References

上下文特定API参考

Each reference guide includes relevant API tables:

getting-started.md - Core setup APIs
layers-and-data.md - Layer and data binding APIs
markers.md - Marker APIs and events
data-visualization.md - Bubble, color mapping, legend APIs
user-interactions.md - Zoom, pan, tooltip, selection APIs
map-providers.md - Map provider APIs
customization.md - Appearance and styling APIs
accessibility.md - Accessibility-related APIs

每个参考指南都包含相关API表格：

getting-started.md - 核心设置API
layers-and-data.md - 图层与数据绑定API
markers.md - 标记API与事件
data-visualization.md - 气泡、颜色映射、图例API
user-interactions.md - 缩放、平移、提示框、选择API
map-providers.md - 地图提供商API
customization.md - 外观与样式API
accessibility.md - 无障碍相关API

Next Steps

后续步骤

Start with getting-started.md to set up your first map
Explore layers-and-data.md to understand data binding
Add markers.md to plot locations
Implement user-interactions.md for zoom, pan, and tooltips
Review customization.md for styling and themes
Check accessibility.md to ensure WCAG compliance

Package:

@syncfusion/ej2-angular-maps

Documentation: Syncfusion Angular Maps Documentation
Demos: Syncfusion Angular Maps Demos

从getting-started.md开始，设置你的第一个地图
探索layers-and-data.md，理解数据绑定
添加markers.md，绘制位置标记
实现user-interactions.md，添加缩放、平移和提示框
查看customization.md，进行样式与主题设置
检查accessibility.md，确保符合WCAG标准

Package:

@syncfusion/ej2-angular-maps

Documentation: Syncfusion Angular Maps Documentation
Demos: Syncfusion Angular Maps Demos