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

最新推荐文章于 2024-09-10 19:01:04 发布
最新推荐文章于 2024-09-10 19:01:04 发布
阅读量5.3k 收藏 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 422
https://dafrok.github.io/vue-baidu-map/#/zh/control/scale
vue如何使用百度地图
最新发布
weixin_59763367的博客
09-10 1260
1.public文件夹下放置index.html文件。三、设置地图区域 必须设置div宽度和高度，否则也不能正常显示。script 引用网址标签不能太靠下。核查API密钥，确保密钥正确无误。2.在html文件中引入网址，二、在config.js文件中添加。data属性里面设置跳转链接地址。钩子确保DOM元素已经加载完毕。四、设置点击事件百度链接跳转。下面是地图方法和属性。
VUE 中引入百度地图 定位
Web前端工程师
08-16 793
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 2950
vue 3 引入百度地图api 最近项目要用到百度地图api，好久没用到地图，就百度了一番，vue引入 百度地图api，但是找了好几篇文章，发现都没办法成功实现，现将方法记录如下，希望后来者少走弯路，代码如下 <!-- 大屏首页 --> <template> <div id="allmap"></div> </template> <script> import { defineComponent, onMou..
vue/cli 3.0中使用百度地图api
Calmlyx的博客
08-12 2226
参考地址：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.js调用Android原生操作
10-14
当需要利用Vue.js构建的Web页面与Android原生功能交互时，就需要进行跨平台调用。本文将详细介绍如何通过三步实现Vue.js调用Android原生操作。 **第一步：创建Android对JavaScript的接口** 在Android端，我们需要...
vue3引入百度地图
zifengningyu的博客
01-24 1091
vue引入百度地图实现地图以及卫星的切换
vue3项目中引入百度地图
qq_43751614的博客
08-07 1085
vue3项目中引入百度地图
百度地图infoBox例子
06-03
百度地图infoBox小例子，就是百度地图infobox的小例子，还需要介绍别的吗
使用百度地图自定义信息窗口InfoBox（可扩展个数）
07-11
使用开源类InfoBox.js 结合boorstrap样式开发出一款美观的信息窗口，不限制窗口大小可以扩展tab页。入口页面为home.html
在vue3中如何使用百度地图API（详细步骤+demo示例）
jia嘉ioo的博客
05-24 4319
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
vue使用百度地图
qq_35993607的博客
07-18 284
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 4370
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 542
一. 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使用百度地图API详细教程
WwLK123的博客
07-11 3057
Vue-baidu-map的详细基础使用教程。
vue 使用自己封装的原生 ajax
05-30
如果你想在 Vue 中使用自己封装的原生 ajax，可以按照以下步骤操作： 1. 在 Vue 组件中定义一个方法，用于发送 ajax 请求： ```javascript methods: { ajax: function(options) { var xhr = new XMLHttpRequest...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值