js和vue如何调用百度地图

最新推荐文章于 2024-05-04 23:04:04 发布
最新推荐文章于 2024-05-04 23:04:04 发布
阅读量912 收藏 4
点赞数 1
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61876792/article/details/123901404
版权

在日常生活中，地图的应用很广泛，那么作为前端小白，怎么样才能调用地图模块呢？

以百度地图为例：

1：首先打开百度地图开放平台网站百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)icon-default.png?t=M276https://lbsyun.baidu.com/

2：注册一个个人开发者账号。创建好后点击控制台，找到应用管理--我的应用，新建一个应用

3：新建一个html，在页面中先导入百度地图，具体步骤如下图

 页面效果如下

 那怎么给地图的某个地点做一个标记呢？

 

上述代码可以实现在地图上单击创建一个标记，再单击会取消上一个标记在这次点击的左边位置新建一个标记，双击会把之前单价创建的标记创建一个面

页面效果如下

 

接下来我们要实现搜索功能，在文本框里输入文字，然后地图把输入的东西检索并在地图上标记出来，这个功能需要jQuery.js的Ajax请求，因为要请求百度地图的检索功能api

 

 

 

 页面效果

 那么如何在vue项目中调用呢？

只需要在public目录下的index.html中引入百度地图接口

 

然后就可以在页面中使用啦！

 启动项目，看下效果

以上就是 调用百度地图的步骤了，如有疑问可在下面评论必会答疑解惑

 

鸭子嘎鹅子呱
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【程序设计】JavaScript调用百度地图API
星拱北辰的博客
03-18 1559
本文分享百度地图API使用方法和实战案例
在vue移动端中使用百度地图打开百度APP，实现到这里去
z18511120547的博客
02-04 2042
在vue移动端中使用百度地图打开百度APP，实现到这里去 效果图 代码 在html中引入 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.5&ak=你得秘钥"></script> 在模板中 // An highlighted block <template> <div class="hello"> <div class="hearder"
js实现打开百度地图
whsAf007的博客
05-06 1122
代码 注册自己的百度AK 参考 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, use...
2024年Web前端最全vue项目调用百度api接口接入地图，真香定律
最新发布
2401_84434442的博客
05-04 675
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】然后注入依赖：BaiduMap,BmScale},HTML代码，在需要引入百度地图的地方加入下面代码接入百度地图。
js如何直接打开百度地图app进行导航
w15228212327_cc的博客
12-08 1447
只需要知道自己要到的目的地的经纬度，就可以直接打开地图； 注意：经纬度位置不要写反了 window.location.href ="http://api.map.baidu.com/marker?location=29.539792,106.519852&title=泉州xx科技有限公司&content=泉州xx科技有限公司&output=html" ...
vue2.0 唤起百度地图app_今天不谈哪个导航好！百度高德二合一APP体验
weixin_39796752的博客
11-07 231
[PConline应用]百度好还是高德好？这就好比是一个鸡生蛋还是蛋生鸡的问题，永远没有答案。除了每个人的使用习惯以外，这两款地图APP的确在很多方面各有侧重，比方说高德更注重导航定位，即便是再偏僻的乡间小路也可以准确地导航出来。而百度则胜在街景及信息更新频率上，很多刚刚修改过的地标和公交路线，都能被百度地图实时查询出来。不过在一部手机里，同时安装两款地图APP的确比较麻烦，那么能否将这两者合二为...
vue中调用百度地图实现搜索等功能
01-08
vue中调用百度地图实现搜索等功能 在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能，不是很难只是在一个未知的领域可能有点迷茫 现在也是体会到了，学新的东西还是得看官方文档。...
详解vue项目中调用百度地图API使用方法
10-17
主要介绍了vue项目中调用百度地图API使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue调用百度地图api
08-10
vue调用百度地图api
java+vue使用百度地图用代理方式访问瓦片
11-06
百度离线瓦片 放入tomcat或者nginx中代理使用离线瓦片地图 在index.htm中...<script type="text/javascript" src="static/baidumapv2/baidumap_offline_v2_load.js"> 具体目录图片格式自己可以在 load文件中进行更改
Vue调用百度接口做百度搜索
weixin_30919571的博客
09-06 3377
　　这两天由于学习需要，需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口，不会没关系，发挥我们强大的学习能力，都不是事，学习了半天基本也就可以初级上手了，写篇随笔记录下来，方便以后回顾。当然童鞋们有更好的意见的请留言，一起学习进步。 　　本次demo实现的是简单的百度搜索页面，用到了vue和百度接口，采用了单页实现，没有使用vue-cli。最初，要用vue实现接口功能我很懵，...
vue-cli 单页面应用中打开新页面
Sophiego的博客
06-12 1615
vue-cli 项目中需要打开新页面，而并非原来的单页面应用；百度查看文档解释vue 2.0版本只能通过a 标签打开；&lt;a class="link" :href="host+'/indexDetail'" target="_blank"&gt;&lt;/a&gt;打开indexDetail新的页面data:{host: window.location.origin}...
vue已知商家位置调用高德、百度和腾讯地图显示商家位置和导航（a标签href在url后拼接参数）
weixin_40679578的博客
11-20 1358
需求和效果图如下，点击图片，根据坐标显示出商家的位置和名字，上面还有一排路线规划 点击图片后选择地图 高德地图效果图 百度地图 腾讯地图： 最开始看的高德，有vueamap文档，去高德官网配了key查了半天，弄出来了个路线规划，但是发现并没有实用，只要一个路线规划（就是两个点它能自动规划路线）没有方向。于是就换了种形式，发现特别简单，就是通过url跳过去调用第三方就行 可以看看腾讯的就大概...
vue使用百度地图（自己记录）
Shuai_YeYe的博客
03-23 257
vue使用百度地图 1、打开public文件夹下的index.html 2、引入百度地图信息 <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=密钥"></script> <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/AreaRestr
Vue中JSH5移动端调起第三方地图软件(高德、腾讯、百度)
qq_53749423的博客
11-14 3662
Vue中JSH5移动端调起第三方地图软件(高德、腾讯、百度)
vue编程式路由实现新窗口打开
weixin_30378623的博客
03-24 1161
一.<router-link>标签实现新窗口打开： 官方文档中说 v-link 指令被 <router-link> 组件指令替代，且 <router-link> 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签，但事实上vue2版本的 <router-link> 是支持target="_bla...
【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图（超详细）
热门推荐
11-01 1万+
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
Vue项目中使用百度地图，详细过程
weixin_65793170的博客
11-14 1万+
vue项目中使用百度地图，过程详细
百度地图的使用方法，如何在Vue项目中使用百度地图
wzy199982的博客
10-31 5035
使用百度地图的详细步骤、丰富百度地图上的内容（添加地图控制器、地图上绘制内容（点线面等））、如何在Vue项目中使用百度地图
vue3调用百度地图覆盖物点更新
07-28
对于Vue 3调用百度地图覆盖物点的更新，您可以按照以下步骤进行操作： 1. 首先，确保您已经在Vue项目中引入了百度地图的API，并且可以成功加载地图。 2. 在Vue组件中，可以使用`mounted`生命周期钩子函数来初始化地图并创建覆盖物点。例如： ```javascript mounted() { this.initMap(); this.createOverlay(); } ``` 3. 在`data`中定义地图对象和覆盖物点对象。例如： ```javascript data() { return { map: null, marker: null }; } ``` 4. 在`methods`中编写初始化地图和创建覆盖物点的方法。例如： ```javascript methods: { initMap() { this.map = new BMap.Map("mapContainer"); // "mapContainer"是包含地图的HTML元素的ID this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 设置地图中心点和缩放级别 }, createOverlay() { const point = new BMap.Point(116.404, 39.915); // 覆盖物点的经纬度 this.marker = new BMap.Marker(point); // 创建覆盖物点对象 this.map.addOverlay(this.marker); // 添加覆盖物点到地图上 } } ``` 5. 如果需要更新覆盖物点的位置，可以在需要的时候调用更新方法。例如： ```javascript updateOverlay() { const newPoint = new BMap.Point(116.418, 39.925); // 新的覆盖物点的经纬度 this.marker.setPosition(newPoint); // 更新覆盖物点的位置 } ``` 6. 在Vue模板中使用地图容器和调用更新方法的按钮。例如： ```html <template> <div> <div id="mapContainer" style="width: 100%; height: 400px;"></div> <button @click="updateOverlay">更新覆盖物点</button> </div> </template> ``` 通过以上步骤，您就可以在Vue 3中调用百度地图的API，并成功更新覆盖物点的位置。请注意，上述代码仅作为示例，具体实现可能根据您的需求而有所不同。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值