在使用百度地图的时候,需要使用自定义的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. <a href="javascript:;"></a>

    有时会在网页a标签中看到这样的代码,比如: <a href="javascript:;">反选</a> 这是啥意思呢? 我们知道标签的 href属性用于指定 ...

  2. C# .NET如何定义图片按钮

    先添加一个按钮,然后修改Image或者BackgroundImage显然不好,我想要按钮透明,就不要放在按钮的方框里,而且鼠标滑过和鼠标点击最好都是我自定义.   我们拉一个PictureBox,然后 ...

  3. Markdown 语法的简要规则

    标题 标题是每篇文章都须要也是最经常使用的格式,在 Markdown 中.假设一段文字被定义为标题,仅仅要在这段文字前加 # 号就可以. # 一级标题 ## 二级标题 ### 三级标题 以此类推,总共 ...

  4. Python全栈

    Python基础 Python基础01 Hello World! Python基础02 基本数据类型 Python基础03 序列 Python基础04 运算 Python基础05 缩进和选择 Pyth ...

  5. Map-produce算法两个开源实现

    https://github.com/michaelfairley/mincemeatpy https://github.com/denghongcai/mincemeat-node

  6. iOS开发----iOS 8的虚化效果

    在iOS 7中,一个重大的改变就是随处可见的虚化,这在通知中心和控制中心表现得尤为抢眼: 然而,当开发人员们着手去将类似的模糊效果增加自己的App的时候,他们会发现有相当严重的障碍. 那时苹果所界定的 ...

  7. Rust hello world 语法解说

    Rust的hello world代码例如以下: fn main() { println!("Hello, world!"); } 1.fn main() fn main(){   ...

  8. 一条SQL语句面试题:求选修所有课程的学生

    前几天求职面试,有一道SQL题:给出三个表:学生.课程.成绩,求选修了所有课程的学生. 一道看似很简单的问题,把我难住了,我改了又改,涂涂画画,抓耳挠腮,因为试卷没有多少空白位置了,最后只好放弃.心情 ...

  9. ios33--线程安全

    // // ViewController.m // 05-掌握-线程安全 // // 多线程下载文件:每个线程下的部分可能是交错的,到时候就拼接不了.除非每个线程下载的不是交错的,而是从头到尾依次分开 ...

  10. 关于Time Series Database

    今天观察了下clojure之父datomic.com的数据库 有点类似sequence数据库的变种 不过这类数据库,感觉用在移动端会更有市场: 1. 移动端需要这种可以本地存储,无删除,联网只增加,只 ...