vue调用百度地图API实现点击相应位置切换地图定位

最新推荐文章于 2025-06-18 15:22:08 发布

bubble_1001

最新推荐文章于 2025-06-18 15:22:08 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/bubble_1001/article/details/88656501

本文介绍如何在Vue项目中利用百度地图API，实现在页面上显示地图，并根据用户点击左侧建筑列表，地图自动定位到相应地点并显示详细信息。详细讲述了需求分析、实现步骤以及最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue调用百度地图API实现点击相应位置切换地图定位

1、需求分析

在页面显示地图，初始状态显示上海市，地图上有特定地点的标注。
左侧为建筑（地点）列表，点击某个地点右侧地图定位到其地理位置并显示具体信息。

2、实现步骤

在百度地图开放平台申请密钥（ak）

在项目中引入百度地图api

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*********(你的ak)"></script>

html页面布局

<el-container >
        <el-aside style="margin-top:15px">
            <el-table :data="buildinglist" @row-click="skiptomap" fit highlight-current-row stripe border>
                <el-table-column prop="name" lable="name" align="center"<

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bubble_1001

关注关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Android之调用百度地图API规划当前位置到指定位置的路线

Heavn的博客

10-15

2991

本文属于原创作品，转载请注明出处。数据库课设做了一个Android端的外面平台，包括顾客端、骑手端、商家端和后台审核端四个客户端。然后想给骑手做一个路线导航的功能，能够自动规划自己当前位置到顾客或者商家的路线。这里调用了百度地图的API。以下是具体内容。下载百度地图SDK 上百度地图官网下载，下载时建议把示例代码也下载下来，里面有些文件之后可以用到。配置AndroidStudi...

vue点击定位到指定位置_百度地图vue-baidu-map自动定位，鼠标选点并进行逆解析，地区检索，使用案列以及解决方案...

weixin_39977488的博客

12-22

2288

店铺信息size="large"placeholder="请输入店铺名称"v-decorator="['openShopData.shopName', {rules: [{ required: true,whitespace: true, message: '请输入店铺名称'}]}]">size="large"placeholder="请输入店铺地址"v-decorator="['openS...

参与评论您还未登录，请先登录后发表或查看评论

vue使用百度地图API,点击地址，地图上调到相应地点

itsxyu的博客

11-12

1771

实现以下效果，点击按钮地图跳转到对应地址 1.申请百度秘钥，在index.html中引入 2.在webpack.base.conf.js中配置Bmap 3.vue页面中使用 <template> <div id="all"> <ul> <li v-for="(item,index) in lists" :key="inde...

Vue2中百度地图API的使用

最新发布

战场战魁

06-18

223

【代码】Vue2中百度地图API的使用。

百度地图API地理位置和坐标转换

weixin_34361881的博客

05-27

780

1.由地名（省份、城市、街道等）得到其对应的百度地图坐标： http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&address=北京市其对大陆主要城市的解析很好，但是有些大陆的小城市、香港、台湾的一些区域无法解析，我测试到的如下：解析错误的城市：伊犁|新界|新竹|港岛|基隆|云林|博尔塔拉|桃园...

百度地图api 点击标注后跳转页面

lhw112233的博客

10-13

2059

百度地图api 标注点击跳转页面初始化地图 window.onload = function(){ //得到所有点，包括点的id、经纬度、跳转地址链接 //jd、 wd、href getPoints(); //初始化地图 initMap(); } var dList = new Array(); function getPoints(){ jQuery.ajax({ type: "POST", dataType: "json", async:fal

Vue 百度地图API实现定位用户位置功能

weixin_52417514的博客

02-23

1380

Vue 百度地图API实现定位用户位置功能

详解vue项目中调用百度地图API使用方法

01-19

步骤一：申请百度地图密钥； JavaScript API v1.4以及以前的版本无序申请秘钥（ak），自v1.5版本开始需要先申请秘钥（ak），才可以使用，如需获取更高的配额，需要申请认证企业用户。百度地图API 链接地址:...

vue cli3 调用百度翻译API翻译页面的实现示例

10-16

在这篇文章中，作者详细介绍了如何在使用Vue CLI3开发的Vue项目中集成百度翻译API，以实现在页面上对指定文本进行翻译的功能。这个示例不仅涉及到了如何调用第三方API，还结合了前端页面设计、事件处理、异步请求等...

vue实现百度echart地图省市级别点击下钻显示效果

03-28

在本文中，我们将深入探讨如何在Vue.js框架中利用百度ECharts实现地图的省市级别点击下钻显示效果。首先，我们需要了解Vue.js和百度ECharts的基本概念，然后逐步讲解实现这个功能的步骤。 Vue.js是一个轻量级的前端...

Vue中使用百度API获取地理位置

qq_50665031的博客

08-11

2385

Vue中使用百度API获取地理位置新建一个文件夹 Map.js export function MP(ak) { return new Promise(function (resolve, reject) { window.onload = function () { resolve(BMap) } var script = document.createElement("script"); script.type = "text

网页调用百度地图API,获取当前位置并导航到目的地

weixin_53051858的博客

02-04

675

网页调用百度地图API,获取当前位置并导航到目的地，链接调整，超简单

百度地图 点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图

热门推荐

Orbita_wangtao

07-31

2万+

百度地图 点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

apicloud （第五篇 bmap百度地图一键回到当前位置）

程序猿小白的博客

12-30

1821

前言：最近一直在做apicloud 地图这一块，所以想分享一下自己遇到的坑。功能介绍：打开地图，首先获取用户的当前位置，并标识一下。当用户浏览到其他区域时（比如从当前位置滑到了城阳区），可以一键返回到当前位置。 1、如下： 2、首先要引入bMap（bMap官方文档：https://docs.apicloud.com/Client-API/Open-SDK/bMap#addAnnota...

百度地图，点击，切换地址

zxp_smile的博客

06-16

437

根据百度地图API自定义切换地图类型为卫星或普通

qq_43651168的博客

04-11

3993

在Vue3中使用百度地图API切换地图类型为卫星或普通，创建一个自定义组件并在其中使用百度地图API。根据实际业务场景的需要，不能直接使用百度地图的控件，所以打算用百度地图API

vue使用百度map，实现点击Marker切换图标，以及展示此Marker信息。

一个前端的自述

07-16

3821

先放效果图，其中每一个点代表了小区的位置，打了贴纸隐藏的地方是小区的名字和地址。见谅。一、接入百度地图，首先要注册成为百度地图开放平台的开发者，申请百度地图的密钥（ak），web端使用的是JavaScriptAPI，所以我们申请的就是JavaScriptAPI。二、在你的ak申请好了之后，在public下的index引入。 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的

百度地图 js api 修改中心点或移动到另一个中心点

weixin_37387603的博客

12-21

4185

创建map，初始化中心点 ``` var map = new BMap.Map("container",{enableMapClick:false}); // 创建地图实例 var point = new BMap.Point(116.343328,39.949901); // 创建点坐标 map.centerAndZoom(point, 14); ``` 修改中心点 var point = new BMap.Point(116.326655,39.899438); //跳转到那个中心点 map.setC

vue使用百度地图3.0,使用JavaScriptAPI版,聚合点,个性化地图切换卫星地图

请叫我欧皇！的博客

11-10

4240

为什么用JavaScript版,因为用vue的百度map有问题,地图显示不全,之前还以为是我的问题,结果去了官网发现官网的地图都是显示不全,也不知道咋回事,不知道现在修好了没,所以只好用JavaScript版的了,话不多说,请看代码。4-地图画布是完成了,什么时候去调用setmap(),我在是拿到数据后去调用的这个函数,不然如果页面刷新去调用那么地图肯定是显示不了的,因为提前就绘制了,但是没有数据。5-我在地图上定义了一个自定义按钮el-button,通过这个按钮进行切换地图是卫星还是个性化。

Vue2实现腾讯地图类型及2D/3D视图切换教程