♤ 使用leaflet引入地图（百度地图、高德地图、天地图等）会出现较大的坐标偏移问题
我是看了这个文章找到的解决：https://blog.csdn.net/gisarmory/article/details/108778991
github下载插件地址：https://github.com/gisarmory/Leaflet.InternetMapCorrection
♤ 下面使用百度地图为例，引用插件来解决坐标偏移问题
♤ 1、前往https://github.com/gisarmory/Leaflet.InternetMapCorrection下载插件，进行引入
把dist/leaflet.mapCorrection.min.js 和 examples/lib/plugins/leaflet.ChineseTmsProviders.js 放到新建文件夹util下
image.png
安装 坐标转换的插件
npm install proj4 --s
npm i proj4leaflet --s
打开examples/lib/plugins/leaflet.ChineseTmsProviders.js 进行引入
// 引用
require('proj4')
require('proj4leaflet')
image.png
♤ 2、初始化地图
<template>
<div class="left-let-page">
<div id="map"></div>
</div>
</template>
引入
//引入百度地图
require("@/util/tileLayer.baidu.js")
// 引入互联网地图插件
require("@/util/leaflet.ChineseTmsProviders.js")
// 引入互联网地图纠偏插件
require("@/util/leaflet.mapCorrection.min.js")
this.map = L.map("map", {
minZoom: 1,
center: [39.56, 116.20],
zoom: 15,
scrollWheelZoom: true, //是否可以使用鼠标滚轮缩放地图。如果通过'center'，无论鼠标在哪里，它都会缩放到视图的中心。
zoomControl: true, //缩放控件
attributionControl: true, // 右下角leaflet标识
crs: L.CRS.Baidu,
});
var myIcon = L.icon({
iconUrl: require('@/assets/images/leaflet/marker-icon.png'),
iconSize: [38, 38],
iconAnchor: [18, 40],
popupAnchor: [0, -42],
});
//根据自己引入的地图来添加相对于的底图
//对应的字段在leaflet.ChineseTmsProviders.js里的L.TileLayer.ChinaProvider.providers对象里查找
L.tileLayer.chinaProvider('Baidu.Normal.Map').addTo(this.map);
//添加纠偏参照物
L.marker([39.905530, 116.391305], { icon: myIcon })
.addTo(this.map)
.bindPopup('<p>天安门广场国旗所在位置</p>')
.openPopup();
对应的底图添加
image.png
♤ 结果
image.png
