详解vue在项目中使用百度地图
更新时间：2019年03月26日 16:00:38 作者：爱吃排骨
这篇文章主要介绍了vue在项目中使用百度地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
第一步，去百度地图开发者申请秘钥。
第二步在项目中引入，具体如下
其中index.html存放地图链接，代码如下
然后在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(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl({//添加地图类型控件
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
},
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>
以上所述是小编给大家介绍的vue在项目中使用百度地图详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文主要介绍了vue自动检测手机端响应式布局,可以通过结合 CSS 媒体查询、Vue 的动态数据绑定、适当的第三方库、PostCSS 插件以及正确的视口设置实现,感兴趣的可以了解一下2024-07-07
这篇文章主要为大家详细介绍了vue插件tab选项卡的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家介绍了Vue vxe-table使用问题收录小结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
项目中用到了富文本,选来选去选择了wangeditor,下面这篇文章主要给大家介绍了关于Vue3使用富文本框(wangeditor)的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了Vue3中使用富文本编辑器的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下2023-10-10
本文给大家分享我使用vscode开发的一些配置。其中包括uniapp组件语法提示，uniapp代码提示，代码自动格式化问题，对vscode 开发uniapp的相关知识感兴趣的朋友一起看看吧2021-08-08
这篇文章主要介绍了vue实现简易图片左右旋转,上一张,下一张组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue3利用组合式函数和Shared Worker实现后台分片上传
这篇文章主要为大家详细介绍了Vue3如何利用组合式函数和Shared Worker实现后台分片上传(带哈希计算),感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
最近开发中遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,下面这篇文章主要给大家介绍了关于Vue结合高德地图实现HTML写自定义信息弹窗的相关资料,需要的朋友可以参考下2023-04-04
最新评论