vue.js的vue-cli脚手架中使用百度地图API的实例

2024-07-28 17:25:25

第一步，去百度地图开发者申请密钥。

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页面中使用百度接口步骤也如上面所示

如有不足请谅解！希望给您带来帮助。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

vue项目中使用百度地图的方法

1.在百度地图申请密钥: http://lbsyun.baidu.com/ 将 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥" ></script> 中的密钥替换成你申请的,在 vue项目的index.html引用. 2. 在build 文件下下的 webpack.base.conf.js贴入代码 externals: {
如何将百度地图包装成Vue的组件的方法步骤

(1)在index.html文件中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW "></script> (2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级: external
vue中使用heatmapjs的示例代码（结合百度地图）

业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面.代码如下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .heatmap { width:1900px; height:1900px; } </style> <script src="js/h
2种在vue项目中使用百度地图的简单方法

地图在项目中用得很多,最近也用了几次,好长时间不用都记不清了,闲暇时整理了vue里使用百度地图的2种方法,方便自己查看,也分享给大家,希望可以帮助有需要的人. 普遍的方法是: 1.index.html 中引入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> 2.新建个组件maps 注意 :不要把组件命名为
Vue的百度地图插件尝试使用

百度地图插件安装 CDN全局安装 <script src="https://unpkg.com/vue-baidu-map"></script> 插件的引入 Vue.use(VueBaiduMap.default, { ak: 'YOUR_APP_KEY', }) ak 是在百度地图开发者平台申请的密钥详见 http://lbsyun.baidu.com/apico... 地图视图 BmView 是用于渲染百度地图实例可视化区域的容器使用 Bmview 渲
浅谈Vue下使用百度地图的简易方法

Vue下使用百度地图的简易方法,分享给大家,具体如下: 最近的项目里面,需要用到将具体地址转换成百度坐标系的经纬度,需求比较简单,所以就没有采用GitHub里面的百度Vue插件. 废话不说,直接贴出代码: 引入:在需要用到百度地图的组件里面直接引入 export default { methods: { loadBMapScript () { let script = document.createElement('script'); script.src = 'http://api.map.b
Map.vue基于百度地图组件重构笔记分享

Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,
详解vue在项目中使用百度地图

第一步,去百度地图开发者申请秘钥. 第二步在项目中引入,具体如下其中index.html存放地图链接,代码如下然后在APP.vue里面实现,代码如下 <template> <div id="app"> <div id="allmap" ref="allmap"></div> <router-view></router-view> </div> </tem
详解vue.js下引入百度地图jsApi的两种方法

前言今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们
vue.js的vue-cli脚手架中使用百度地图API的实例

第一步,去百度地图开发者申请密钥. 1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用) 2.密钥申请成功后第二步,在项目的需要模板中引入,具体如下: 项目路径其中index.html存放地图链接,代码如下在百度地图开放平台服务介绍中选择我们所需要的地图类型 demo演示可查看选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=j
详解vue项目中调用百度地图API使用方法

步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"
如何在vue项目中使用百度地图API

目录 1.在百度地图开放平台注册账号并登录 2.选择自己所需的地图版本: 3.在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak(这个ak不是其他的ak哈) 4.之后就可以随处使用我们的百度地图了: 5.标记点的添加并拥有点击弹窗效果: 6.为坐标点添加文本标记: 1.在百度地图开放平台注册账号并登录网址:http://lbsyun.baidu.com/index.php?title=jspopularGL 2.选择自己所需的地图版本: 我个人使用2.0
详解在HTTPS 项目中使用百度地图 API

百度地图 API 产品简介百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富.交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发. 百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用.接口使用无次数限制.在使用前,您需先申请密钥(ak)才可使用. 基础使用引用百度地图 API, 将 "您的密匙" 替换为你在百度地
vue.js的状态管理vuex中store的使用详解

一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为
vue中调用百度地图获取经纬度的实现

项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备首先,我们需要取百度官方申请一个地图api秘钥,https://lbsyun.baidu.com/apiconsole/key 进入后在应用管理,我的应用去申请即可. 申请好以后,我们打开vue项目中public文件下的index.html文件,拼接百度AK值并引入 <script type=&quo
Vue.js和Vue.runtime.js区别浅析

目录区别 HTML Compiler template render() codesandbox.io 区别 Vue.js Vue.runtime.js 体积最大比Vue.js小40% 功能包含HTML Compiler 不含HTML Compiler cdn引入选择Vue.js 选择Vue.runtime.js 可见两者最大的区别就是:是否包含HTML Compiler HTML Compiler HTML Compiler 顾名思义是编译 HTML 的工具.在Vue中,页面元素
vue.js出现Vue.js not detected错误的解决方案

目录 vue.js出现Vue.js not detected Vue.js not detected?与众不同的解决方案 vue.js出现Vue.js not detected 第一:在拓展应用的文件夹中找到文件manifest.json,打开并将此处的false改成true. 第二:在vuejs devtool拓展程序的详情页中开启以下两个选项如果你看到这,恭喜你,看到全网解决这个问题的方法!!!! 以上都是网上有的,但是会有一个小坑, 让很多人....痛....不....欲....生! 看

vue.js的vue-cli脚手架中使用百度地图API的实例

相关推荐

随机推荐