在使用百度地图的时候,需要使用自定义的icon图片,百度的案例中使用的是线上地址,但当替换为本地图片路径的时候,错误出现了
这是本地图片地址

// 创建自定义图标
var fieldIcon = new BMap.Icon(
        // "http://lbsyun.baidu.com/jsdemo/img/fox.gif", // 设置图片
"assets/img/map/icon_cd.png",

new BMap.Size(300, 157) // 设置覆盖物大小
);


路径出错了




当打开其他正常引用的图片时,发现图片路径都是vue-cli已经自动替换后的路径,所有的图片路径都会自动修改到 static/images 文件夹下


也就是打包后图片的存放路径,也就是说,百度地图api中定义的图片路径,vue-cli并不能识别,那我们就可以用一种取巧的方式,将图片直接放到根目录的static文件夹下,static文件夹中的文件,在打包的时候,并不会进行编译,而是完整的迁移到打包后的static文件夹中

// 创建自定义图标
var fieldIcon = new BMap.Icon(
// "http://lbsyun.baidu.com/jsdemo/img/fox.gif",
// "assets/img/map/icon_cd.png",

"static/images/icon_cd.png", // 设置图片路径
new BMap.Size(300, 157) // 设置覆盖物大小
);


这里有一点需要注意,这里路径的最前面并不需要 "/" 来给它定义为绝对路径,现在,图标就可以正常显示了




当然,最简单的办法,直接把icon图标放到线上,就能解决这个问题了



百度地图API在vue-cli中路径错误的问题的更多相关文章

  1. 深入浅出百度地图API开发系列(1):前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  2. 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  3. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  4. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  5. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

  6. VUE之使用百度地图API

    利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: & ...

  7. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  8. 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API

    因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...

  9. 利用百度地图API,在浏览器中找到自己的位置

    首先你得有个百度地图的秘钥,http://lbsyun.baidu.com/apiconsole/key 剩下的就是编码了 这里面会用到一个javascript里的一个函数,getMyLocation ...

随机推荐

  1. Codeforces Round #247 (Div. 2) B

    B. Shower Line time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. mysql 將時間戳直接轉換成日期時間

    from_unixtime()是MySQL裏的時間函數 Sql代碼 select uid,userid,username,email,FROM_UNIXTIME(addtime,'%Y年%m月%d') ...

  3. ubuntu下apache+mysql+php+mysql等之webserver搭建

    相信非常多人跟我一样,想搭建一个自己的webserver.网上资料非常多.可是因为版本号的区别,总是存在依照一个教程来做无法全然实现的问题.近期我也折腾了好几天,google不能用,仅仅能百度,真想说 ...

  4. web 开发之js---js 实现地址栏的表单提交加密编码

    以前在做嵌入式web时,曾经想过cgi加密,原来js可以直接实现,太好了,这里js在客户端实现编码和解码 一.在地址栏直接输入:javascript:str=encodeURI("笃行天下& ...

  5. NSoup解析处理Html

    以前在做网页静态生成的时候,使用正则表达式分析提取网页链接.最近搜索了解到java有个Jsoup解析网页,对应.net有个nsoup.处理网页非常好用. Document doc = NSoupCli ...

  6. c#实现播放器的集中方式

    http://www.cnblogs.com/iskyoole/archive/2012/03/25/2417181.html(原文链接地址) 一.使用vs自带的windows media play控 ...

  7. document.body.className = document.body.className.replace("siteorigin-panels-before-js","");

    document.body.className = document.body.className.replace("siteorigin-panels-before-js",&q ...

  8. PSAM卡之常用APDU指令错误码【转】

    本文转载自:http://blog.csdn.net/lvxiangan/article/details/53933714 PSAM卡的内容交互,是通过APDU指令完成的,常见的APDU报文格式如下: ...

  9. BZOJ_4398_福慧双修&&BZOJ_2407_探险_分治+dij

    BZOJ_4398_福慧双修&&BZOJ_2407_探险_分治+dij Description 菩萨为行,福慧双修,智人得果,不忘其本. ——唐朠立<大慈恩寺三藏法师传> ...

  10. UVA 10559 Blocks —— 区间DP

    题目:https://www.luogu.org/problemnew/show/UVA10559 区间DP,有点难想: 为了方便,先把原来就是连续一段相同颜色的点看做一个点,记一下长度: f[i][ ...