练习：Leaflet基础:网络地图（一）

具体实现效果图下：

1. 当前使用的版本：

• node：20.8.0
• npm：10.1.0

2. 初始化创建一个vue3基础项目（具体创建方法可百度）

3.安装依赖

4. 建一个文件Map/index.vue，里面如下代码

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted } from "vue";

onMounted(() => {
  initMap();
});

/**
 * @author:南希Libra
 * @description:初始化地图
 */
const initMap = () => {
  var map = L.map("map", {
    center: [39.89854, 116.3347],
    zoom: 4,
    maxZoom: 25,
    // zoomSnap: 0.25, //zoomSnap可以设置为零。这意味着 Leaflet 不会捕捉缩放级别。
    // zoomDelta: 0.25, //控制了使用缩放按钮时要放大/缩小的缩放级别数
    // wheelPxPerZoomLevel: 0.25, //选项控制鼠标滚轮放大或缩小的速度。
  });
  let url =
    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
  // let url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  L.tileLayer(url, {
    maxZoom: 4,
  }).addTo(map);
  // 显示应用于地图中心点的比例
  L.control.scale().addTo(map);
  // 添加描述
  getDescribe(map);
  // 添加旅游规划路线
  getTravelLine(map);
  // 设置旅游景点
  getTrvalPoint(map);
};
/**
 * @author:南希Libra
 * @description:设置描述
 */
const getDescribe = (map) => {
  let legend = L.control({ position: "bottomright" });
  legend.onAdd = function (map) {
    let div = L.DomUtil.create("div", "legend");
    div.innerHTML = `
            <p><b>我的旅游规划路线</b></p><hr>
            <ul>
                <li>哈尔滨</li>
                <li>青岛</li>
                <li>南京</li>
                <li>上海</li>
                <li>杭州</li>
                <li>厦门</li>
                <li>大理</li>
                <li>新疆</li>
                <li>成都</li>
                <li>重庆</li>
                <li>长沙</li>
                <li>武汉</li>
                <li>西安</li>
                <li>洛阳</li>
                <li>北京</li>
                
                
            </ul>
        `;
    return div;
  };
  legend.addTo(map);
};
/**
 * @author:南希Libra
 * @description:设置线段
 */
const getTravelLine = (map) => {
  let lineData = [
    [45.78, 126.58], // 哈尔滨
    [36.07, 120.38], //青岛
    [32.06, 118.8], //南京
    [31.24, 121.5], //上海
    [30.22, 120.12], //杭州
    [24.44, 118.1], //厦门
    [25.68, 100.3], //大理
    [44.6, 81.39], // 新疆
    [30.57, 104.07], //成都
    [29.56, 106.55], //重庆
    [28.23, 112.94], // 长沙
    [30.59, 114.3], //武汉
    [34.34, 108.94], //西安
    [34.62, 112.45], // 洛阳
    [39.9, 116.41], // 北京
  ];
  let line = L.polyline(lineData, { color: "red", width: 10 });
  line.addTo(map);
};
/**
 * @author:南希Libra
 * @description:设置旅游点
 */
const getTrvalPoint = (map) => {
  let pointData = [
    { lat: 45.78, lng: 126.58, address: "哈尔滨" }, // 哈尔滨
    { lat: 36.07, lng: 120.38, address: "青岛" }, //青岛
    { lat: 32.06, lng: 118.8, address: "南京" }, //南京
    { lat: 31.24, lng: 121.5, address: "上海" }, //上海
    { lat: 30.22, lng: 120.12, address: "杭州" }, //杭州
    { lat: 25.68, lng: 118.1, address: "大理" }, //大理
    { lat: 24.44, lng: 100.3, address: "厦门" }, //厦门
    { lat: 44.6, lng: 81.39, address: "新疆" }, // 新疆
    { lat: 30.57, lng: 104.07, address: "成都" }, //成都
    { lat: 29.56, lng: 106.55, address: "重庆" }, //重庆
    { lat: 28.23, lng: 112.94, address: "长沙" }, // 长沙
    { lat: 30.59, lng: 114.3, address: "武汉" }, //武汉
    { lat: 34.34, lng: 108.94, address: "西安" }, //西安
    { lat: 34.62, lng: 112.45, address: "洛阳" }, // 洛阳
    { lat: 39.9, lng: 116.41, address: "北京" }, // 北京
    ,
  ];

  var group = L.layerGroup().addTo(map);
  let markerIcon = L.icon({
    iconUrl: "http://pic.616pic.com/ys_img/00/08/06/TnCNKnPVDY.jpg",
    iconSize: [20, 20],
  });
  for (let i = 0; i < pointData.length; i++) {
    let lat = pointData[i].lat;
    let lng = pointData[i].lng;
    var marker = L.marker([lat, lng], {
      icon: markerIcon,
    });
    marker.addTo(group);
    marker.bindPopup("我是" + pointData[i].address);
    marker.openPopup();
  }
};
</script>
 
<template name="Map">
  
  <div id="map"></div>
</template>
 
<style scoped lang='scss'>
#map {
  height: 560px;
  width: 1200px;
  border: 1px solid #f00;
}
:deep(.legend) {
  font-size: 16px;
  line-height: 24px;
  color: #333333;
  font-family: "Open Sans", Helvetica, sans-serif;
  padding: 10px 14px;
  background-color: pink;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  max-width: 250px;
  border: 1px solid grey;
  overflow-y: auto;
  height: 450px;
}

.legend p {
  font-size: 16px;
  line-height: 24px;
}
</style>

学习文档：

1.Vite Plugin | Vue DevTools

2.webfansplz/vite-plugin-vue-inspector - Vite 中文文档

4. 获取经纬度网址：【经纬度查询】在线地图经度纬度查询|经纬度地名坐标转换

5. 快速入门指南 - 宣传册 - 用于交互式地图的 JavaScript 库 (leafletjs.com)