vue和高德地图结合引入图片问题

要求：marker要自定义的背景图片，高德提供了api，下面是链接：

https://lbs.amap.com/api/javascript-api/example/marker/custom-icon

 定义一个底层容器，一定要记得给这个div长和宽，要不然无法显示

<div id="map-container" />

style：

<style lang="scss" scoped>
  #map-container {
    width: 100%;
    height: 100%;
  }
 //scoped作用如果有多个vue文件的div名字叫做map-container,则此设置只在当前文件夹中起作用
</style>

加载地图：

mapInit() {
        GLOBAL.map = new AMap.Map('map-container', {
          mapStyle: 'amap://styles/macaron',
          resizeEnable: true,
          center: [119.68219, 30.63824],
          zoom: 14
        })
     
      },

 这里的icon我做了一个判断，不同数值显示不同图片，有红绿灰三种颜色，判断如下：