vue.js的vue-cli脚手架中使用百度地图API的实例
作者:muzidigbig 时间:2024-05-05 09:07:59
第一步,去百度地图开发者申请密钥。
1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用)
2.密钥申请成功后
第二步,在项目的需要模板中引入,具体如下:
项目路径
其中index.html存放地图链接,代码如下
在百度地图开放平台 服务介绍中 选择我们所需要的地图类型 demo演示可查看
选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=jspopular
然后在某模板 例:APP.vue里面实现,代码如下
<template>
<div id="app">
<div id="allmap" ref="allmap"></div>
<router-view></router-view> //切记模板中一定要有渲染
</div>
</template>
<script>
export default {
name: 'App',
methods:{
map(){
let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
map.centerAndZoom(new BMap.Point(114.30, 30.60), 11);// 初始化地图,设置中心点坐标(经纬度/城市的名称)和地图级别
map.addControl(new BMap.MapTypeControl({//添加地图类型控件
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("武汉");// 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//map.setMapStyle({style:'midnight'});//地图风格
}
},
mounted(){
//调用上面个的函数
this.map()
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/*设置地图的宽高*/
#allmap{
height: 500px;
overflow: hidden;
}
</style>
在html页面中使用百度接口步骤也如上面所示
如有不足请谅解!希望给您带来帮助。
来源:https://blog.csdn.net/muzidigbig/article/details/80452896
标签:js,vue-cli,api
0
投稿
猜你喜欢
使用FastCGI部署Python的Django应用的教程
2021-08-24 20:56:54
Python实战之markdown转pdf(包含公式转换)
2023-11-24 12:39:34
Python中 CSV格式清洗与转换的实例代码
2023-02-19 02:23:57
Php获取金书网的书名的实现代码
2023-07-14 02:31:21
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2024-05-11 09:54:56
python实现批量解析邮件并下载附件
2023-07-05 02:32:16
CSS? 3D? 3D CSS?
2009-05-13 13:10:00
PyPy 如何让Python代码运行得和C一样快
2022-07-16 20:17:58
python中使用print输出中文的方法
2023-06-10 16:49:40
Python文件读写w+和r+区别解析
2022-01-12 04:23:04
MySQL数据库之union,limit和子查询详解
2024-01-16 08:15:29
mysql load data infile 的用法(40w数据 用了3-5秒导进mysql)
2024-01-19 00:24:22
实例讲解如何配置MySQL数据库主从复制
2008-12-17 15:33:00
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2022-08-13 06:54:59
jupyter notebook 增加kernel教程
2023-04-27 20:28:43
chr(9)、chr(10)、chr(13)、chr(32)与特殊空格
2009-07-03 15:26:00
JavaScript 限制文本框不可输入英文单双引号的方法
2024-04-25 13:06:56
深入Golang中的sync.Pool详解
2024-02-02 05:31:27
Python实现微信表情包炸群功能
2022-08-17 07:28:14
python 实现提取PPT中所有的文字
2023-05-01 04:21:35