使用高德地图marker类中关于content图片路径问题

0

高德Marker 类中有关于icon 图片的使用,现有两种方式可以实现

一.使用import 导入

在组件中直接import svg from 'demo/run.svg'
然后再初始化Marker标记的时候

 let marker = new AMap.Marker({
      position: new AMap.LngLat(item.LONGITUDE, item.LATITUDE),
      title: item.ADDRESS,
      offset: new AMap.Pixel(-10, -10),
      icon: svg
    });

在icon导入svg就可以了,这是第一种方式,可以实现marker类标记图片

clipboard.png

但是这种方式存在一个缺点即 图片在build后会以base64形式被打包到js文件中。不易于后期更换图片标记;

二.使用静态资源

--废话不多直接上代码

  let marker = new AMap.Marker({
          position: new AMap.LngLat(item.LONGITUDE, item.LATITUDE),
          title: item.ADDRESS,
          offset: new AMap.Pixel(-10, -10),
          icon: "static/img/running.svg"
        });

我们在项目static文件夹下新建一个img图片,然后将所有的静态资源都放入这个文件夹中,这样打包的时候,依旧能找到图片路径,并且图片是独立打包称文件夹。不过这种方式需要配置webpack才行, 方法 可以看我这篇文章;

总结

个人推荐方法二,这种方式更易于图片更换以及后期维护,而方法一如有更改必须每次打包项目才行;

你可能感兴趣的

Jenny · 2018年07月17日

感谢分享!章节标题建议使用 一/二/三 级标题以便生成目录索引,此文已协助修改
Markdown 语法传送门:https://segmentfault.com/mark...

回复

载入中...