高德地图marker自定义图标不显示问题

今天做项目的时候需要涉及到高德标志点的自定义

这是高德的官方说明

// 创建 AMap.Icon 实例：
var icon = new AMap.Icon({
    size: new AMap.Size(40, 50),    // 图标尺寸
    image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
    imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
});

// 将 Icon 实例添加到 marker 上:
var marker = new AMap.Marker({
    position: new AMap.LngLat(116.405467, 39.907761),
    offset: new AMap.Pixel(-10, -10),
    icon: icon, // 添加 Icon 实例
    title: '北京',
    zoom: 13
});

map.add(marker);

踩坑的地方

我将上面的代码cv进项目后发现图片根本没有显示出来，出现了

image.png

这种破图的样式。
解决方案

image: require("图片地址")

使用require去引入本地的图片。

踩坑二的地方

明明有将图片引入也将marker加到地图上了，却还是不能在地图上看到自定义的点
解决方案

imageSize:
size:
imageOffset:

这里的高德提供的icon创建属性,需要与自身实际情况修改。直接从高德哪里搬过来，它的偏移量是超过了我自身图片的，所以出现了图片看不见的情况。我就是这里出错了。

！！！！！！！超级踩坑 require() 里面只能放路径，绝对绝对不要用变量取代去路径！！！我排了好几个小时的错误，尝试各种姿势，结果是这里有个大坑