leaflet使用高德地图

原创

已于 2024-03-18 10:16:28 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-03-17 20:34:33 首次发布

文章介绍了在Vue项目中使用Leaflet集成高德地图的过程，强调了Leaflet的轻量化和易用性，同时提到了集成后的一些功能，但也指出Leaflet无法覆盖高德地图的所有特性，如特定API调用仍需使用高德API。

之前项目中，需要高德地图，但因项目要求，需用leaflet集成高德。

好处：leaflet非常轻量化，方法调用很容易上手，切集成后，类似点击、画线、图层切换、打点等等事件可由leaflet统一调用，无需再看其他地图api文档重复学习。

不好处：一些高德特有的api调用，leaflet无法介入，因此还是需要高德key，进行特有的api调用，比如经纬度和详细地址的互相转换。

npm install leaflet

<template>
  <div ref="mapRef" class="map"></div>
</template>

初始化leaflet

const initMap = () => {
  const map = L.map(mapRef.value, {
    center: [lnglatData.value[1], lnglatData.value[0]],
    zoom: 13,
    minZoom: 6,
    maxZoom: 23
  });
  // const mapType = 'vec';
  L.tileLayer(
    'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      attribution: '&copy; 高德地图',
      maxZoom: 25,
      minZoom: 1,
      subdomains: '1234',
      zoom: 3
    }
  ).addTo(map);
  map.on('click', (evt) => {
    mapObj.value.removeLa