VUE之使用百度地图API
2024-08-29 14:33:25
利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API。
步骤一:申请百度地图密钥;
步骤二:在index.html中添加百度地图JavaScript API接口;
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KCzp8claYra8uYAvahElV9oKUT6j7Gx1" ></script>
步骤三:在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;
externals: {
"BMap": "BMap"
}
步骤四:在地图组件中import BMap,否则会出现"BMap undefined";
import BMap from 'BMap';
步骤五:创建地图对象,在mounted生命周期调用;
mounted() {
this.ready();
},
methods: {
ready: function() {
var map = new BMap.Map('allmap');
var point = new BMap.Point(104.075796, 30.659684);
map.centerAndZoom(point, 14);
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
map.enableDoubleClickZoom(true);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
}
步骤六:将组件插入父组件中;
最新文章
- 使用KRPano资源分析工具还原全景图片
- LeetCode之104. Maximum Depth of Binary Tree
- ext3是对ext2文件系统的一个扩展高性能日志文件系统
- flex 调用gp服务
- a标签包input引起的问题
- Codeforces Gym 100002 B Bricks 枚举角度
- Oracle的硬解析和软解析
- [BZOJ 1047] [HAOI2007] 理想的正方形 【单调队列】
- Lucene.Net 2.3.1开发介绍 —— 三、索引(三)
- 源码剖析Django REST framework的请求生命周期
- 第一篇:SpringBoot2.0简单介绍
- Go指南练习_Stringer
- String的intern()方法和java关键字、保留字
- 适合移动端与PC端的 CSS Reset - m_base.css
- zabbix lld使用trapper方式(zabbix_sender)
- 管理开机启动:systemd
- 到底什么是BFC、IFC、GFC和FFC,次奥?
- 005 JAVA多线程和并发基础面试问答(转载)
- 【BZOJ】1857: [Scoi2010]传送带(三分)
- MVVM3