由于是内网开发，需要在vue中引用离线地图，也在网上查阅了很多资料，最终在之前百度地图的基础上引入离线地图，下面说一下引入的步骤，本文只实现了离线地图的混合模式，卫星模式和街道模式，如需要其他功能，可以参考这篇文章

我们的步骤是

1 下载百度瓦片地图，把下载好的瓦片放在服务器上;

2 下载离线资源包map;

3 配置完成后在项目中引用

一，下载瓦片

下载瓦片的办法有很多，可以在网上随便找个地图下载器下载，选好地图级别，级别越大，下载的瓦片就越多，其中卫星地图和街道地图是两种不同的展示模式，

二，下载离线资源

百度网盘链接:链接：pan.baidu.com/s/1cP5V1smr… 提取码：xw8l

三项目配置

将下载的资源放在public下，其中titles是地图瓦片

打开map3.0_init.js，其中bmapConfig下就是瓦片地址


/**
 * 离线API初始化, 请在加载map3.0.js之前引入
 */

/**
 * 这是必须要确认的配置
 */
var bmapConfig = {
  'tiles_path': '',      //显示普通地图，为空默认在 tiles/ 目录
  'tiles_satellite_path': 'http://localhost:9107', //显示卫星影像，为空默认在 tiles_satellite/ ，只有底图没有地址标注
  'tiles_hybrid_path': 'http://localhost:9106'  //显示带有街道的卫星影像，为空默认在 tiles_hybrid/，需和卫星影像配合使用
}
//获得API主目录，一般不需要修改
var scripts = document.getElementsByTagName("script")
var _JS__FILE__ = scripts[scripts.length - 1].getAttribute("src")
bmapConfig.home_dir = _JS__FILE__.substr(0, _JS__FILE__.lastIndexOf("/"))
if (bmapConfig.tiles_path.length == 0) {
  bmapConfig.tiles_path = bmapConfig.home_dir + "/tiles"
}
if (bmapConfig.tiles_satellite_path.length == 0) {
  bmapConfig.tiles_satellite_path = bmapConfig.home_dir + "/tiles_satellite"
}
if (bmapConfig.tiles_hybrid_path.length == 0) {
  bmapConfig.tiles_hybrid_path = bmapConfig.home_dir + "/tiles_hybird"
}
//调试日志，请保留
function bmapLog (s) {
  if (typeof console != 'undefined')
    console.log('>>> ' + s)
}

由于百度瓦片体积太大，所以在本地启动了一个nginx,卫星和街道各开放了一个端口号，展示出来就是混合模式的地图，这个看大家的方便了，

四，配置完成后，直接在vue项目中引入

微信截图_20231130170333.png

五，在组件中使用

<template>
  <div class="app-container" style="height: 500px;width: 500px">
      <div id="map"   class="map"></div>
  </div>
</template>
<script>
export default {
  name: 'screen',
  components:{
    
  },
  data(){
   return{

   }
  },
  created() {


  },
  computed: {
  },
  mounted () {
    this.$nextTick(() => {
       this.init();
    })
  },
  methods: {
    init() {
      var map = new BMap.Map("map")    // 创建Map实例
      map.centerAndZoom(new BMap.Point(116.41400, 39.91500), 10)  // 初始化地图,设置中心点坐标和地图级别
      map.setMapType(BMAP_HYBRID_MAP)	
      map.enableScrollWheelZoom(true)     //开启鼠标滚轮缩放
      var pt = new BMap.Point(116.41400, 39.91500);
      let icon1=require('../../assets/2.jpg')
      var Icon = new BMap.Icon(icon1, new BMap.Size(80, 100));
      var marker = new BMap.Marker(pt, {
        icon: Icon,
      });
       Icon.setImageSize(new BMap.Size(60,60))
      map.addOverlay(marker);
    },
  }
};
</script>
<style lang="scss" scoped>
   .map{
      width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
      .anchorBL{
        display:none
      }
      ::v-deep{
        .anchorBL img {
            display: none;
       }
        .BMap_cpyCtrl span {
          display: none !important;
        }
      }  
       
      }
</style>

有问题了可以留言，大家一起交流

vue引入百度离线地图