Angular+Leaflet 封装map component

最新推荐文章于 2025-05-15 21:08:40 发布

晓晓是个打字员

最新推荐文章于 2025-05-15 21:08:40 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular 地图文章标签： leaflet angular google map

本文链接：https://blog.youkuaiyun.com/qq_32490291/article/details/89843672

Angular 同时被 2 个专栏收录

21 篇文章

订阅专栏

地图

3 篇文章

订阅专栏

本文介绍了如何在Angular应用中封装一个使用Leaflet的地图组件。通过引入leaflet库，创建组件模板并设置地图显示，以及在父组件中使用该组件来展示marker信息。为了确保地图完整加载，还需在index.html中引入相关样式和脚本文件。完整代码可在指定链接获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：实现如图地图，并封装为组件
在这里插入图片描述

map.component.ts:

首先，引入leaflet和translate：

import * as L from 'leaflet'; 

import { TranslateService } from '@ngx-translate/core';  //根据语言来加载不同的layer

然后定义下template：

@Component({
  selector: 'my-map',
  template: `
    <mat-progress-bar *ngIf="!mapLoad"
      class="example-margin"
      [color]="primary"
      [mode]="determinate"
      [value]="50"
      [bufferValue]="75">
    </mat-progress-bar>
    <div id="box" style="height:100%;display:flex;position:relative;">
      <div id="container" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;"></div>
    </div>
  `
})

显示地图信息：

  initMap(){
    //leaflet map + google 
    this.LMap = L.map('container').setView([24.4884, 118.12706],this.zoom);
    if (this.translate.currentLang !== 'zh-CN') {
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 20
      }).addTo(this.LMap);
    } else {
      L.tileLayer('http://{s}.google.cn/vt/lyrs=m&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
      }).addTo(this.LMap);
    }
  }
  
  ngOnInit(){
    setTimeout(()=>{    
      this.initMap();
    },100);
  }

引用map component的页面：app.component.html；

<div class="map-box column">
  <my-map class="column" [markers]="markerList" [zoom]="6" style="flex: 1;width: 100%;max-height: 100%;height:100%;overflow: hidden;"></my-map>
</div>

markers，用来收集存放需要显示的marker信息；

为了防止有空白块或者加载不全的情况，我们要在index.html页面引入两个文件：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

大致的流程就是这样子的，如果想要更完整的代码：
https://download.youkuaiyun.com/download/qq_32490291/11160081

others：
leaflet -npm