在使用百度地图的时候,需要使用自定义的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. Servlet实现国际化

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/internationalization.html: 三个重要术语: 国际化(i18n):这意味着 ...

  2. &quot;Simple Factory&quot; vs &quot;Factory Method&quot; vs &quot;Abstract Factory&quot; vs &quot;Reflect&quot;

    ref: http://www.cnblogs.com/zhangchenliang/p/3700820.html 1. "Simple Factory" package torv ...

  3. 016 ppp authentication

    Press RETURN to get started!       Router>en Router#config t Enter configuration commands, one pe ...

  4. CSS (二)解析CSS盒子

    话说.一写博客还有些莫名的兴奋感-- 这几天一直挤时间忙于赶牛腩视频,迟到的CSS盒子.请谅解. CSS盒子,一開始听起来还有点高大上的赶脚. 后来了解之后,发现事实上非常easy理解.从功能上讲非常 ...

  5. java实现floyd统计天津地铁的网站距离

    一:说明 (1)使用floyd实现各个网站的计算记录和路径 (2)网站获取和初始距离依据外部文件得到 (3)结果以外部文件的形式存储 (4)网站间转乘,觉得初始值也为1 (5)代码凝视比較具体,如有疑 ...

  6. c++运算符重载以及一些基本概念

    c++primer第四版435 1.赋值( = ), 下标( [ ] ) ,调用 (  ( )  ), 成员訪问箭头 (->)等操作符必须定义为成员,定义为非成员时,编译器报错 2. 像赋值一样 ...

  7. 【hdu3544】 Alice's Game

    给一块n*m的巧克力,Alice只能垂直切,切成A*m和B*m,并且A+B=n,Bob只能横切,只能切成A*n和B*n,并且A+B=m. 对于n*n的这种巧克力,谁先切了第一刀,就直接让对方有切两刀的 ...

  8. 【Dairy】2016.10.17-1 OIer最悲剧的事情

    OIer最悲剧的事情: 看完题,觉得很可做 然后开始码,码了很久                                       一测样例,不过.. 开始肉眼查错..手玩样例.. 过了很久 ...

  9. [Codeforces 666B] World Tour

    [题目链接] https://codeforces.com/contest/666/problem/B [算法] 首先 , 用BFS求出任意两点的最短路径 然后 , 我们用f[i][0-2]表示从i出 ...

  10. 2018.09.08 DL24 Day1 总结

    补一下之前的总结…… T1.restaurant 这道题还是很简单的嘛,子恒dalao非常良心.我们把招牌菜和所需要的菜品绑定在一起就成了完全背包,然后直接跑一遍完全背包即可. #include< ...