leaflet使用高德地图

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

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

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

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

之前项目中，需要高德地图，但因项目要求，需用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.removeLayer(marker.value);
    map.flyTo(evt.latlng); // 参数1是中心点经纬度，参数2是缩放级别
    mapClick([evt.latlng.lat, evt.latlng.lng]);
  });
  return map;
};

点击事件：

const mapClick = (e) => {
  if (type.value === 'add') {
    marker.value = L.marker(e).addTo(mapObj.value);
    lnglatData.value[0] = e[1];
    lnglatData.value[1] = e[0];
    console.log(e, '---e');
    regeoCode([e[1], e[0]]);
  }
};
const removeMap = () => {
  if (mapObj.value) {
    mapObj.value.remove();
  }
};

完整代码

<script setup>
import L from 'leaflet';
import { defineComponent, toRefs, reactive, getCurrentInstance, ref, onMounted, onUnmounted } from 'vue';
import { useStore } from '@zqxx/store';
import { zqUpload } from '@zqxx/components';
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
  securityJsCode: '你的高德安全密钥',
};
const store = useStore();
const instance = getCurrentInstance();
const isVisible = ref(false);
const emits = defineEmits(['doRefreshMap']);
let title = ref('');
const type = ref('view');
const locationName = ref('');
const lnglatData = ref([]);
const mapDisabled = ref(false);
const validRange = ref('');
const formData = ref({});
const show = (ty, row) => {
  if (ty === 'view') {
    type.value = 'view';
    title.value = '详情';
    mapDisabled.value = true;
    locationName.value = row.locationName;
    lnglatData.value[0] = row.longitude;
    lnglatData.value[1] = row.dimension;
  } else if (ty === 'add') {
    // console.log(row, '-add-row');
    formData.value = row;
    type.value = 'add';
    mapDisabled.value = false;
    lnglatData.value = [116.39743596925251, 39.90887057595898];
  }
  isVisible.value = true;
  setTimeout(() => {
    mapObj.value = initMap();
    if (ty === 'view') {
      marker.value = L.marker([lnglatData.value[1], lnglatData.value[0]]).addTo(mapObj.value);
    }
  }, 500);
};
defineExpose({
  show,
});
const geocoder = ref(null);
const initMapGaode = () => {
  AMapLoader.load({
    key: '申请的高德key', // 申请好的Web端开发者Key，首次调用 load 时必填
    plugins: ['AMap.Scale', 'AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
      version: '1.1',
    },
  })
    .then((AMap) => {
      geocoder.value = new AMap.Geocoder({
        city: '010', // 城市设为北京，默认：“全国”
        radius: 1000, // 范围，默认：500
      });
    })
    .catch((e) => {
      console.log(e, 1111);
    });
};
const regeoCode = (e) => {
  geocoder.value.getAddress(e, (status, result) => {
    if (status === 'complete' && result.regeocode) {
      let address = result.regeocode.formattedAddress;
      // document.getElementById('address').value = address;
      locationName.value = address;
      console.log(address, '---address');
    } else {
      // log.error('根据经纬度查询地址失败');
    }
  });
};

const mapObj = ref();
const mapRef = ref();
const marker = ref([]);
const layerGroup = ref(null);
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.removeLayer(marker.value);
    map.flyTo(evt.latlng); // 参数1是中心点经纬度，参数2是缩放级别
    mapClick([evt.latlng.lat, evt.latlng.lng]);
  });
  return map;
};
const mapClick = (e) => {
  if (type.value === 'add') {
    marker.value = L.marker(e).addTo(mapObj.value);
    lnglatData.value[0] = e[1];
    lnglatData.value[1] = e[0];
    console.log(e, '---e');
    regeoCode([e[1], e[0]]);
  }
};
const removeMap = () => {
  if (mapObj.value) {
    mapObj.value.remove();
  }
};
const onConfirm = () => {
  if (type.value === 'add') {
    saveConfigLocation({
      attendanceRange: formData.value.validRange,
      configurationId: formData.value.id,
      dimension: lnglatData.value[1],
      locationName: locationName.value,
      longitude: lnglatData.value[0],
    }).then((res) => {
      // console.log(res, '---saveConfigLocation');
      emits('doRefreshMap');
      onClose();
    });
  }
};
const onSearch = () => {
  // mapObj.value.removeLayer();
};
//
const onClose = () => {
  isVisible.value = false;
};
const onCloseDialog = () => {
  isVisible.value = false;
  removeMap();
  lnglatData.value = [];
  locationName.value = [];
  mapDisabled.value = false;
};
// 在 onMounted 中初始化地图
onMounted(() => {
  initMapGaode();
});


// 在组件卸载时删除地图
// onUnmounted();
</script>