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

waruqi 发布于2019-08-22 18:45 / 1357人阅读

摘要：不易于后期更换图片标记二使用静态资源废话不多直接上代码我们在项目文件夹下新建一个图片，然后将所有的静态资源都放入这个文件夹中，这样打包的时候，依旧能找到图片路径，并且图片是独立打包称文件夹。

高德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类标记图片

但是这种方式存在一个缺点即图片在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才行，方法可以看我这篇文章;

总结

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

GPU云服务器云服务器 java图片路径问题 php中关于的运算百度地图map_marker 高德地图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96172.html

高德地图 Javascript API 入门（四）

摘要：高德地图入门四地图覆盖物覆盖物类名说明是否插件点标记否覆盖物点标记复杂点标记对象，对普通点标记的扩展否覆盖物折线否覆盖物多边形否覆盖物圆否图片覆盖物否地图右键菜单否点标记预览自定义点标记预览多边形预览右键菜单添加右键菜单内容项放大缩小添加高德地图 Javascript API 入门（四）地图覆盖物覆盖物类名说明是否插件 AMap.Marker 点标记否 AM...

AlanKeene 2019-08-20 14:29 评论0 收藏0
VUE 记一次高德地图和Echarts（中国地图）

摘要：效果图准备工作高德地图申请安装中国地图高德地图官方点我进入创建动态创建标签后的是需要的插件中国地图安装开始使用创建组件写入需要的分布指数高低写入高德地图需要的效果图 showImg(https://user-gold-cdn.xitu.io/2019/5/24/16ae7a7f2f9cac45); 准备工作高德地图申请key 安装Echarts 中国地图高德地图官方API...

KoreyLee 2019-05-27 17:42 评论0 收藏0
Vue.js 中使用高德地图定位及渲染地图

摘要：看了上面有集成的高德地图组件，但由于项目所要用到的不多，所以决定跟着文档写一写运行环境是引入高德地图一般用使用最简单粗暴的引入地图的方法就是，在入口的头部直接引入，记得一定要带上如果没有的话去高德地图的官网申请一个。看了github上面有集成的高德地图组件，但由于项目所要用到的不多，所以决定跟着文档写一写.运行环境是vue-cli webpack 引入高德地图一般用使用vue-cl...

Ku_Andrew 2019-08-21 17:58 评论0 收藏0