在使用百度地图的时候,需要使用自定义的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. Linux系统备份还原工具1(DD)(应用实例)

    DD使用教程:http://www.cnblogs.com/EasonJim/p/7442223.html 以下实例没经过大量测试,可能在一些机器上不会有效. 一般围绕以下几点进行设置: 1.dd完后 ...

  2. iOS8使用TouchID

    iOS8新增了LocalAuthentication框架,用于TouchID的授权使用.亲測,眼下须要用户的设备支持指纹识别并已设置锁屏,并且实际測试过程中反馈比較慢.不能直接跟第三方账号passwo ...

  3. Linux VSFTP服务器

    Linux VSFTP服务器 一.Linux FTP服务器分类: <1>wu-ftp <2>proftp=profession ftp <3>vsftp=very ...

  4. 彻底弄懂px,em和rem的区别

    国内的设计大师都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点: 1.IE无法调整那些使用px作为单位的字体大小: 2.国外大部分网站能够调整的原因 ...

  5. 【POJ 3352】 Road Construction

    [题目链接] 点击打开链接 [算法] tarjan算法求边双联通分量 [代码] #include <algorithm> #include <bitset> #include ...

  6. 将数据从数据仓库Hive导入到MySQL

    1.启动Hadoop,hive,mysql 2.在mysql中建表(需要导入数据的) mysql> CREATE TABLE `dbtaobao`.`user_log` (`user_id` v ...

  7. Spring MVC标签<mvc: annotation-driven />小结 原

    转自:https://my.oschina.net/u/1156626/blog/881483 mvc:annotation-driven的作用 Spring 3.0.x中使用了mvc:annotat ...

  8. 连接mysql时提示java.sql.SQLException: Access denied for user 'root'@'DESKTOP-N2B2D9A' (using password: YES)

    用root连接mysql时提示:访问被拒绝 检查一下mysql server是否开启,发现后台在运行着..  然后查了一下mysql的用户表,发现root只能运行使用本地ip(localhost或者1 ...

  9. vue中子组件向父组件传值

    1.子组件$emit()触发,父组件$on()监听 子组件:<template> <div class="hello"> <button v-on:c ...

  10. 使用 typescript 和 canvas 重构snow效果

    前言:之前做过一个 snow 效果,但是是直接用 HTML 做的点击此处查看 ,几个星期前,我用 typescript 和 canvas 重构了一下, snow效果是一个很简单的效果,但是用来练手还是 ...