如何在vue-cli中使用百度地图

最新推荐文章于 2024-05-16 22:48:30 发布
最新推荐文章于 2024-05-16 22:48:30 发布
阅读量1.2w 收藏 3
点赞数 1
分类专栏： vue+百度地图 文章标签： vue-cli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hailangtuteng/article/details/80136102
版权

首先第一步 搭建项目的架子 vue init webpack + 项目名称

第二部就是申请密钥 http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 

申请密钥后 看一下百度开放平台问题反馈 http://lbsyun.baidu.com/index.php?title=FAQ/jsapi

在index.html引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥也就是ak值"></script>
<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width,initial-scale=1.0" >
< title >map </ title >
</ head >
< style >
/* 去掉地图左下角的百度LOGO */
.anchorBL {
display: none
}
</ style >
< script type= "text/javascript" src= "https://api.map.baidu.com/api?v=2.0 & ak=" ></ script >
< body >
< div id= "app" ></ div >
<!-- built files will be auto injected -->
< div id= "allmap" ></ div >
</ body >
</ html >
地图容器必须需要div 包裹起来 
在webpack.base.conf.js里面 配置
module. exports = {
context: path. resolve( __dirname, '../'),
entry: {
app: './src/main.js'
},
externals: {
"BMap" : "BMap"
},
}

在需要使用百度地图的组件中导入

import BMap from 'BMap'

最后一步 就是查看地图的api http://lbsyun.baidu.com/jsdemo.htm#lite_2_0 进行使用了

一定记住需要在mounted钩子函数里面操作API 因为地图需要在所以的dom树加载完毕后才能操作

< template >
< div >
< div id= "allmap" class= "allmap" ></ div >
</ div >
</ template >

< script >
import BMap from 'BMap'
export default {
name: 'HelloWorld',
data () {
return {
}
},
created () {
},
mounted() {
// var lng='';
// var lat='';
var map = new BMap. Map( "allmap"); // 创建地图实例
var point = new BMap. Point( 116.331398, 39.897445); // 创建点坐标
map. centerAndZoom( point, 15); // 初始化地图，设置中心点坐标和地图级别
map. enableScrollWheelZoom( true); //开启鼠标滚轮缩放

map. addControl( new BMap. NavigationControl());
map. addControl( new BMap. ScaleControl());
map. addControl( new BMap. OverviewMapControl());
map. addControl( new BMap. MapTypeControl());
map. setCurrentCity( "武汉"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

// var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}
// map.addControl(new BMap.NavigationControl(opts)); 自定义控件

map. setMapStyle({ style: 'midnight'}); //地图风格




树沙&
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
百度地图的使用方法，如何在Vue项目中使用百度地图
wzy199982的博客
10-31 5072
使用百度地图的详细步骤、丰富百度地图上的内容（添加地图控制器、地图上绘制内容（点线面等））、如何在Vue项目中使用百度地图
vue.js的vue-cli脚手架中使用百度地图API的实例
10-17
今天小编就为大家分享一篇关于vue.js的vue-cli脚手架中使用百度地图API的实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
在vue中使用百度地图
一个有思想的新时代农民工的博客
03-08 5581
百度地图api按照官方文档写的代码报了以下图示的错： Uncaught TypeError:Cannot read property 'fc' of undefined
Web前端最全vue项目中使用百度地图教程（完整流程），搜狐新媒体运营面试
最新发布
2401_84411767的博客
05-16 324
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】二、项目使用1、在index.html中引入2、代码演示。
Vue cli4+echarts+百度地图
cyb2473541293的博客
09-22 186
Extension for Baidu Map 百度地图扩展 根据要求 index.html 里插入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your ak" ></script> <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script&.
Vue中 Vue-Baidu-Map基本使用
路虽远行则将至，事虽难做则必成。
11-29 1万+
使用Vue-Baidu-Map 在Vue中就可以快速高效的完成一些基本需求，不用每次要用的时候还要去百度搜索。
【通俗易懂】Vue如何使用百度地图，通过vue-baidu-map插件实现地图功能【文档使用介绍】
热门推荐
seeeeeeeeeee的博客
10-21 1万+
现在的地图组件已经是很常用的东西了，基本上都会接触到，那么如何使用呢，相信很多新手会有点懵 这里就把基础的用法说一遍，然后说一下如何看文档。这样你就可以自己去添加功能了。 效果图 我做的是PC端的 目前的基础功能就是自动定位城市，然后可以检索地点。这也是通用最常用的基础功能了。 第一步：先下载插件 npm install vue-baidu-map --save 第二部：全局注册一下，在main.js里面 提示：密钥不填是地图出不来的哦。 import BaiduMap from 'vue-baidu-
【快速上手】Vue如何通过百度地图插件——vue-baidu-map插件实现地图轨迹与路线等功能
weixin_43746402的博客
06-28 1万+
现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线+运动轨迹的过程介绍一下对应组件使用与注意事项。
使用vue-baidu-map实现地图找房功能（聚合）
11-03
在本教程中，我们将深入探讨如何使用`vue-baidu-map`插件在Vue.js应用程序中实现地图找房功能，特别是地图上的数据聚合。`vue-baidu-map`是Vue.js的一个组件库，它允许开发者轻松地集成百度地图API，提供丰富的地图...
vue-baidu-map 本地工具资源和配制好的API资源
12-11
使用时参考我的博文https://blog.csdn.net/weixin_44000275/article/details/110482508， 修改Map.vue中的方法和myMap.js中的瓦片路径
vue-cesium：Vue与Ceesium结合的框架，基于Vue Cli创建
01-30
这表明Vue-Cesium可能支持多种地图服务（如Google Maps、百度地图、高德地图），并且专注于3D场景的构建。这些标签为开发者提供了使用不同地图服务和扩展3D功能的可能性。 7. **压缩包内容**：“vue-cesium-master...
vue之百度地图的使用（一）
only_zing的博客
08-02 3104
vue中引用百度地图、使用百度地图搜索框以及在地图手动选取位置。
Vue使用百度地图API详细教程
WwLK123的博客
07-11 2949
Vue-baidu-map的详细基础使用教程。
vue 使用百度地图（vue-baidu-map）
localhost
03-25 505
vue 使用百度地图（vue-baidu-map）
Vue中百度地图（vue-baidu-map）的使用
julac的博客
10-13 1509
vue-baidu-map
Vue中如何进行地图展示与交互（如百度地图、高德地图）？
徐师兄的博客
06-09 4103
随着移动互联网的普及，地图应用已经成为人们生活中不可或缺的一部分。在Vue.js中，我们可以使用第三方地图库（如百度地图、高德地图）来实现地图的展示和交互。本文将介绍如何在Vue.js中使用百度地图和高德地图，并提供代码示例。
【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图（超详细）
11-01 1万+
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
vue项目中如何使用百度地图
qq_37899792的博客
10-11 4021
api 参考http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a3b26 两种使用方式：vue特定的VueBaiduMap /原生js 第一种使用Vue Baidu Map 网址：https://dafrok.github.io/vue-baidu-map/#/zh/index 实例如下 <...
如何在 Vue 中使用百度地图
smily77369的博客
09-16 7141
更多内容请参考：Vue Baidu Map 使用npm 安装百度地图的依赖 $ npm install vue-baidu-map --save 在 main.js 中全局注册 import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_
serve vue-cli-service serve build vue-cli-service build lint vue-cli-service lint
09-08
具体来说，vue-cli-service serve用于在开发环境下运行项目，vue-cli-service build用于打包项目，vue-cli-service lint用于检查项目代码风格。这些命令是在项目的package.json文件中定义的脚本。例如，可以通过运行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值