一、需求概述

在小程序上弄一个室内图。要能点击的，点击后可以弹出信息框，缩放不能失帧的。

接下来冲浪查了一波，网上基本没有符合我想要的帖子，要么就是基于已有geoJSON绘制省市地图，要么就是在谷歌地图到绘制出想要的地块，咱就是说地图上没有的东西咋整？要是用canvas亲手绘制复杂平面图，那工作量还挺大，还有一种是用three.js绘制3D平面图，这怕不是加大工作量了。

接下来自己拧螺丝吧

二、实现方法

用ps绘制出图片，转成svg
使用echarts生成平面图（参考echarts示例）

小程序web-view访问H5界面

三、实现过程

用ps按照给的底图描绘路径，并保存导出为svg（注意！！是绘制路径，别的可不行，复杂图案可用钢笔工具。画出image无法在echarts上显示。不会ps的前端不是好程序员）

<defs>
  //错误的
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQ.." id="img1" height="966" width="1287"/>
 </defs>
 <g>
  <title>Layer 1</title>
  <g id="主体">
    //正确的
   <path fill="#d9d9d9" d="m12,756l238,1c-200.8,-93.9 -156,-298 -156,-298c65.7,-200.4 265,-261 265,-261c330.7,-150.2 685,26 685,26c307.7,157.9 198,396 198,396c-60.7,152.7 -225,168 -225,168c-443.9,50 -665,-1 -665,-1l-340,0l0,-31z" class="s0" id="外圆"/>
   <path fill="#279f68" d="m1060,139l26,0l0,5l-26,0l0,-5z" class="s3" id="矩形 1"/>
  </g>

html代码

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
  <meta charset="utf-8">
 </head>
 <script type="text/javascript" src="js/jweixin-1.3.2.js"></script>
 <script type="text/javascript" src="js/jquery.js"></script>
  //跳转小程序需要引用的脚本
 <script type="text/javascript" src="js/echarts.min.js"></script>

 <body style="height: 85vh; margin: 0">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript">
   var dom = document.getElementById('container');
   var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
   });
   var app = {};
   var option;
      //设置选中的颜色
   let AdData = [{
    name: "测试",
    list: ["测试-1", "测试-2"],
    color: "#34a471"
   }]
   let seriesData = []
   AdData.filter((item) => {
    item.list.filter((i) => {
     let setItemColor = {
      name: i,
      itemStyle: {
       areaColor: item.color,
       borderColor: item.color,
      }
     }
     seriesData.push(setItemColor)
    })

   })

   $.get('./svg/map.svg', function(svg) {
    echarts.registerMap('adParkingMap', {
     svg: svg
    });
    option = {
     tooltip: {
      textStyle: {
       fontSize: 20
      },
      formatter: function(params) {
       return params.name;
      }
     },
     series: [{
      name: 'map',
      type: 'map',
      map: 'map',
      roam: true,
      emphasis: {
       label: {
        show: false
       }
      },
      selectedMode: false,
      data: seriesData
     }]
    };
    myChart.setOption(option);
   });

   if (option && typeof option === 'object') {
    myChart.setOption(option);
   }
      //点击跳转小程序页面
   myChart.on('click', function(params) {
    wx.miniProgram.navigateTo({
     url: "/pages/detail/index?value=" + params.name
    })
    return
   });
   window.addEventListener('resize', myChart.resize);
  </script>
 </body>
</html>

小程序代码

将H5页面放到服务器上，path传访问地址就可以啦

<web-view src="{{path}}"></web-view>

实现效果

可缩放、点击跳转。

四、遇到的问题及解决思路

由于我没有专业绘制svg的工具（懒得下载），只能利用ps绘制生成psd文件。但是我的ps版本不是很新，没有直接导出svg的功能，因此可访问在线ps工具导出svg，https://www.photopea.com/，或者在网站上直接绘制svg图 https://editor.method.ac/ （有点难画，所以建议先在ps工具画图）
检查生成的svg代码，基本都是path就对了，有image标签会导致页面白屏
小程序上没有svg标签，也引不了svg，试了很多办法解析svg也不行，只好通过跳转H5实现。
H5高度不要设置100%，苹果真机调试的时候会闪屏。