Vue 中使用高德地图 自定义内容标记 / 自定义点标记内容 无

高德地图提供了自定义点标记功能，核心代码如下(官方文档)：

    // 点标记显示内容，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的问题