vue使用百度地图api（原生js同样适用）

最新推荐文章于 2024-08-23 20:22:08 发布
最新推荐文章于 2024-08-23 20:22:08 发布
阅读量5.2k 收藏 7
点赞数 3
文章标签： 百度地图api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICY___/article/details/90786361
版权
本文介绍如何在Vue项目中以及原生JavaScript环境中集成和使用百度地图API。首先，需在百度地图开放平台注册并获取AK。接着在Vue的生命周期钩子中初始化地图组件。虽然内容较多，但官方文档提供了详细指导，通过深入学习可以实现更多功能。原生JS的集成相对简洁。
摘要由CSDN通过智能技术生成

在之前的一个小项目中，用到的显示当地的地图功能，因为之前有了解过百度地图的开放平台，所以选择了百度地图作为的api作为示例，高德地图也类似。此文以百度为例，讲讲如何在vue或者原生js中使用这个强大的api！

  • 背景说明，我用的是js的api，不同的类型有不同的api，百度地图开放平台-js-api；
  • 第一步，注册，申请密匙，按照步骤去填写相关的资料。

  • 然后创建应用（这里面选择使用的场景和功能）

  • 完成后，你便有了所谓的 AK （这是你能请求到数据的关键）

没有以外的话，你会看到这些，红框的内容为 AK

最低0.47元/天 解锁文章
ICY___
关注
专栏目录
vue调用百度地图api
08-10
vue调用百度地图api
vue 百度Api
Call_me_small_pure的博客
02-27 407
https://dafrok.github.io/vue-baidu-map/#/zh/control/scale
实战使用Vue 2接入百度地图API
最新发布
qq_46292480的博客
08-23 947
通过本文的介绍，你已经掌握了如何在Vue 2项目中接入百度地图API，实现基本的地图显示、标记点添加以及动态更新等功能。百度地图API提供了更多的功能和服务，如路径规划、交通状况查询等，可以根据实际需求进一步探索和使用。希望这篇文章能够帮助你在项目中更好地利用地图服务，提升应用的功能性和用户体验。
VUE 中引入百度地图 定位
Web前端工程师
08-16 776
1.安装： npm install vue-baidu-map --save 2.全局注册，在main.js中引入以下代码： import BaiduMapfrom'vue-baidu-map' Vue.use(BaiduMap, { ak:'你申请的key' }) 3.完整代码： <template> <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080...
vue 3 引入百度地图api
weixin_42338523的博客
04-28 2925
vue 3 引入百度地图api 最近项目要用到百度地图api，好久没用到地图，就百度了一番，vue引入 百度地图api，但是找了好几篇文章，发现都没办法成功实现，现将方法记录如下，希望后来者少走弯路，代码如下 <!-- 大屏首页 --> <template> <div id="allmap"></div> </template> <script> import { defineComponent, onMou..
vue/cli 3.0中使用百度地图api
Calmlyx的博客
08-12 2213
参考地址：https://juejin.im/post/5bc1515fe51d450e5e0cbf87 首先，申请百度地图ak 其次，引入百度地图js，在public/index.html里面添加下面代码 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"&g...
vue 使用外部JS与调用原生API操作示例
12-13
在Vue.js应用开发中，有时候我们需要利用外部JavaScript库或调用原生设备API来扩展功能。本文将通过实例介绍如何在Vue项目中引入外部JS库并调用原生API。 ### 引入外部JS库 当开发过程中需要用到特定功能，如加密...
js原生+vue+百度离线地图使用
12-27
本文将详细介绍如何利用原生JavaScript与Vue.js进行百度离线地图的集成和应用。 首先，让我们理解“百度离线地图”。百度离线地图是指在本地存储地图数据，以便在无网络连接时仍然能够显示地图。这通常通过下载地图...
vue-cli中使用高德地图的方法示例
10-17
在vue-cli项目中集成高德地图（Amap）涉及到几个关键步骤，从配置环境、获取API密钥到在Vue组件中初始化地图，并实现一些基础的交互功能。下面详细地分解这一过程中的知识点。 ### 1. 获取高德地图API密钥 开始...
vue3引入百度地图
zifengningyu的博客
01-24 1074
vue引入百度地图实现地图以及卫星的切换
百度地图infoBox例子
06-03
百度地图infoBox小例子，就是百度地图infobox的小例子，还需要介绍别的吗
使用百度地图自定义信息窗口InfoBox（可扩展个数）
07-11
使用开源类InfoBox.js 结合boorstrap样式开发出一款美观的信息窗口，不限制窗口大小可以扩展tab页。入口页面为home.html
vue3项目中引入百度地图
qq_43751614的博客
08-07 1057
vue3项目中引入百度地图
在vue3中如何使用百度地图API（详细步骤+demo示例）
jia嘉ioo的博客
05-24 4091
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
vue使用百度地图
qq_35993607的博客
07-18 274
1.main.js import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // 自己申请的ak码 ak: '' }) 2.组件使用 注意：css设置宽高 <template> <div class="map-div"> <!-- 输入搜索地址 --> <...
在vue中使用百度地图API
weixin_42571728的博客
10-23 4360
Web端–在vue中使用百度API 首先进入 百度地图开放平台
vue引入外部js文件并调用其中的方法
热门推荐
lchuyan的博客
11-07 2万+
vue引入外部js文件并调用其中的方法 最近写vue项目，由于刚接触vue这个框架，所以在写代码的时候也是遇到了一些问题，比如本文所提到的引入js文件，话不多说直接上： 这里是所引入的外部js文件的位置 第一种引入方式：export default 方法（在main.js中引入） export default { los: function() { console.log('js外部被调用') } } 这是common.js文件中的代码 import los from '@/assets
vue 引入原生js_vue项目引入原生jsAPI百度地图
weixin_26897585的博客
02-11 529
一. webpack.base.conf.jsexternals: {"BMap": "BMap"}二. main.jsimport BMap from 'BMap' //全局注册，一定要放在vue下面new Vue({BMap,//挂载，非npm命令引入的组件，在这里挂在router,render: h => h(App)}).$mount('#app')三. index.html四....
vue 使用自己封装的原生 ajax
05-30
如果你想在 Vue 中使用自己封装的原生 ajax，可以按照以下步骤操作： 1. 在 Vue 组件中定义一个方法，用于发送 ajax 请求： ```javascript methods: { ajax: function(options) { var xhr = new XMLHttpRequest(); //创建 XMLHttpRequest 对象 xhr.onreadystatechange = function() { if (this.readyState == 4) { //请求完成 if (this.status == 200) { //请求成功 options.success(xhr.responseText); } else { //请求失败 options.error(xhr.status); } } }; xhr.open(options.method, options.url, true); //设置请求方法和地址 xhr.send(options.data); //发送请求 } } ``` 在上述代码中，`ajax` 方法接收一个对象作为参数，包含以下属性： - `method`：请求方法，例如 `"GET"` 或 `"POST"`。 - `url`：请求地址。 - `data`：发送的数据，可以是字符串或 FormData 对象。 - `success`：请求成功时的回调函数。 - `error`：请求失败时的回调函数。 2. 在组件中调用 `ajax` 方法发送 ajax 请求： ```javascript this.ajax({ method: 'POST', url: '/api/login', data: new FormData(document.querySelector('#login-form')), success: function(response) { console.log(response); }, error: function(status) { console.log('请求失败，状态码为：' + status); } }); ``` 在上述代码中，我们通过调用 `ajax` 方法来发送一个 POST 请求，将表单数据作为参数传递给 `data` 属性。当请求成功时，会调用 `success` 回调函数，将服务器返回的数据作为参数传递给它。当请求失败时，会调用 `error` 回调函数，将 HTTP 状态码作为参数传递给它。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值