高德地图提供了自定义点标记功能，核心代码如下(官方文档)：
// 点标记显示内容，HTML要素字符串
var markerContent = '' +
'<div class="custom-content-marker">' +
' <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
' <div class="close-btn" onclick="clearMarker()">X</div>' +
'</div>';
var marker = new AMap.Marker({
position: position,
// 将 html 传给 content
content: markerContent,
// 以 icon 的 [center bottom] 为原点
offset: new AMap.Pixel(-13, -30)
});
// 将 markers 添加到地图
map.add(marker);
也可以使用var markerContent = document.createElement("div")这样的创建方式参考文章。
实际代码中遇到的问题：
一、图片无法显示
使用别名，比如图片使用<img src="@images/a.png" alt="" />，但是这里需要按照字符串传入，这样@images/a.png就不能被正确的编译，导致最终图片的地址是错误从而无法显示。
解决方法：
1.使用 绝对路径
放在pubilc下的资源是不会被编译的，利用这一点可以将图片放在这个文件夹下，然后使用绝对路径进行访问。比如，该路径下有图片A.png，那这里的路径就可以写为<img src="/A.png" alt="" />
2.使用 require函数 （推荐）
require加载图片会将其转为base64的字符串，这样等于是直接加载的base64图片，从而规避路径问题（写require函数的地方会被编译，所以可以使用别名的写法）。
// 借助require函数提前加载到图片
let strimg = require('@images/a.png')
var markerContent =
...
' <img src="' + strimg + '" alt="" />'
...
二、设置class无效
设置的class 没有效果，查看元素class绑定正确但没有效果。出现这种情况和vue的css加载策略有关，往往在style标签中会有scoped, 这样会把此style限定在当前的页面中。在编译时，有scoped的页面样式，都会自动生成有一个唯一标识（attribute），如下图，这样，用字符串方式添加的标签只会是单独的标签而缺少这些标识导致css设置无效。
scoped情况下添加的attribute.png
解决方法：
1.直接添加到index.html中
index.html中的标签会是一个全局标签，添加到这里会直接有效。
2.不使用 scoped
不添加scoped在编译时就不会有唯一标识，这些css也是全局有效，但是全局标签存在一些风险，比如两个页面写了同名的之类。
这两个方法各有利弊，读者根据代码习惯自行取用。
参考：
图片引入方式
使用scoped的问题
