百度地图api-基本用法总结

web前端JavaScript嵌入百度地图API最详细的方法

参考百度地图官方api:百度地图官方api
百度地图提供的拾取坐标: 百度地图提供的拾取坐标

加载地图前提:

  1. 申请百度地图账号
  2. 申请开发者填写开发者信息
  3. 申请AK 点击查看申请步骤

(具体可看个人主页免费视频课程) 

一:百度地图概念

百度地图API是百度地图开放平台面向广大政府、企业、互联网等开发者开放的免费地图服务。拥有定位、地图、导航、轨迹、路况、路线规划、搜索,七大基础地图服务能力,并将七大服务能力开放给各行业开发者使用。

二:百度地图特点


1.免费
百度地图API是免费的对于使用者能够减少使用成本。
2.简单
百度地图API中有详细的教程,一步一步的指导使用者学习和使用,对于刚开始使用API或刚开始学习编程的人来说比较方便。
3.功能齐全
百度地图API提供的功能较多,有定位、地图、导航、轨迹、路况、路线规划、搜索,七大基础地图服务,并且都是常用的实用性较强。
4.支持性较好
百度地图API可以在移动端和PC端使用,还支持在微信小程序中使用,还有javascript相应的API,有利于前端开发的对接。

三: 加载地图

加载地图步骤

  • 7
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
要在Vue2中使用百度地图API,可以使用vue-baidu-map插件来实现。首先,在入口文件main.js中引入该插件,并传入你申请的百度地图API Key。引用 具体步骤如下: 1. 首先,在入口文件main.js中引入vue-baidu-map插件,并传入你申请的百度地图API Key。代码如下: ```javascript import Vue from 'vue' import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: '你申请的key' }) ``` 2. 然后,在需要使用地图的组件中,可以通过在template中使用`<baidu-map>`标签来渲染地图,代码如下: ```html <template> <div> <baidu-map :center="center" :zoom="zoom"></baidu-map> </div> </template> ``` 其中,`:center`为地图的中心点坐标,`:zoom`为地图的缩放级别。 3. 在组件的script部分,定义`center`和`zoom`的值,以及其他地图相关的属性和方法,代码如下: ```javascript export default { data() { return { center: { // 地图中心点坐标 lng: 116.404, lat: 39.915 }, zoom: 13 // 地图缩放级别 } } } ``` 通过以上步骤,你就可以在Vue2中使用百度地图API了。记得替换代码中的`'你申请的key'`为你自己申请的百度地图API Key。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue2中百度地图API的使用](https://blog.csdn.net/m0_70015578/article/details/127875241)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue2.0中使用百度地图API的方法](https://blog.csdn.net/weixin_52479225/article/details/126579928)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农阿茹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值