vue引入地图，实现搜索添加地图位置点，点击地图获取位置信息

最新推荐文章于 2024-07-25 10:08:22 发布

ghl-Dragon

最新推荐文章于 2024-07-25 10:08:22 发布

阅读量2.2k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/g1437353759/article/details/119215161

版权

本文介绍如何在Vue项目中集成百度地图，展示地图并添加搜索功能。通过搜索框，用户可以搜索地图位置，并能获取及储存点击位置的信息。教程包括地图显示、搜索框设置、信息储存及搜索框相关方法的实现。

摘要由CSDN通过智能技术生成

先看效果
在这里插入图片描述
这里引入的是百度地图，根据下图操作即可（选择的是浏览器端,也可以用3.0或者2.0，这里用到的是GL）

获取ak后把这段代码放在index里

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=放在这里"></script>

地图显示位置

在这里插入图片描述

initMap() {
   // console.log("初始化地图");
   map = new BMapGL.Map("mapcontainer");   // 这里的值是上面图片div的id
   window.bmap = map;
   map.centerAndZoom(new BMapGL.Point

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ghl-Dragon

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue中引入百度地图

MtiredM的博客

10-29

5683

vue中引入百度地图 一、通过vue注册的方式引入注：vue百度地图官网

使用百度地图完成【自定义图标】【波纹动画】【点击图标事件】【含完整代码】

mmmmmmmmzw的博客

07-28

726

使用百度地图完成【自定义图标】【波纹动画】【点击图标事件】【含完整代码】

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

在Vue 3 + TypeScript项目中集成百度地图，实现自定义图标点、点击图标弹出提示弹窗、将点移动到展示区域中心以及添加定位功能

m0_47626239的博客

02-28

612

【代码】在Vue 3 + TypeScript项目中集成百度地图，实现自定义图标点、点击图标弹出提示弹窗、将点移动到展示区域中心以及添加定位功能。

Vue3 可视化大屏引入高德地图，超详细，超简单，保姆级教程。

最新发布

favourite23的博客

07-25

1092

1、前往进行账号注册。如果手机上有高德地图App并且已经登录过，则可以直接选择登录2、注册/登录完成后来到控制台-->应用管理-->我的应用-->点击创建新应用3、填写好应用名称和选择应用类型4、填写好后点击添加Key5、填写Key名称，选择Web端（JS API）勾选并同意协议6、完成以上步骤就会得到Key和安全密钥。注意保管。

Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

10-15

主要介绍了Vue.js 实现地址管理页面的思路(地址添加、编辑、删除和设置默认地址),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

vue引用地图

weixin_47526923的博客

05-11

202

转载@dybzy https://elemefe.github.io/vue-amap/#/zh-cn/examples/base/amap

VUE 中引入百度地图(vue-Baidu-Map)

weixin_49470245的博客

07-27

1009

VUE 中引入百度地图(vue-Baidu-Map) 1.安装 npm install vue-baidu-map --save (有淘宝镜像的可以 cnpm install vue-baidu-map --save ) 2.全局注册，在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'ef7MNIKYvirHGbnYdNoBUsFQzhqoAjaH'//你申请的key }) .

vue -web引入百度地图

~牧马~

08-09

1万+

先看效果图，是否是你想要的效果，两张不同缩放得到的效果图要想实现如图所示，必须满足以下几个条件：是否已有百度地图的api的ak密钥；组件是否准备好；如何获取百度地图的api的ak密钥第一步：要有百度账号笔者这里是用QQ号作为百度账号登录的第二步：在“百度开放平台”创建ak 百度开放平台点击进入教程如下：第一步：跳转该页面红色框：代表“创建应用”成功后，ak显示的地方，在这里可以看到并复制蓝色框：代表我们创建的应用是“浏览器端”，一般选择“浏...

vue+高德地图实现地图搜索及点击定位操作

12-28

最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下 [removed]...

vue用BMap百度地图实现即时搜索功能

10-16

这涉及到了清除地图上已有的覆盖物、使用LocalSearch对象进行智能搜索，并将搜索到的位置点添加到地图上，通常通过创建Marker（标注点）的方式来实现。 7. 实现新增和删除功能在即时搜索功能的Vue组件中，还应提供...

vue使用高德地图获取地理坐标信息

06-11

在Vue组件中，你可以使用`AMap.Geolocation`插件获取设备的地理位置信息： ```javascript <div ref="map" class="map"></div> export default { data() { return { position: null, } }, mounted()...

vue引入百度地图，显示地址。

qq_37570945的博客

07-18

2243

首页index.js: <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script> 显示地图的页面 <div class="baidumap" id="allmap"> </div>

vue插入使用地图（简易、即用）

dxn16638400024的博客

07-02

1647

分别为您的高德地图 API Key 和包含地图的 DOM 元素的 ID。这样就可以在您的Vue项目中引入高德地图了！在这段代码中，您需要替换。

vue总结之vue引入高德地图

粥可温

08-31

2090

然后我们可以在package.json里面看到这样一行代码这就代表安装成功。这是一套专门用于vue的高德地图插件，在项目目录下打开入。

vue中引入并使用高德地图

热门推荐

weixin_61032994的博客

04-06

1万+

一、使用npm引入高德地图 1.进入高德开放平台 2.点击：开发支持---------地图JS AP---------JSAPI的加载 3.选择按NPM方式使用loader 4.定义一个有宽高的div 二、小试牛刀----修改鼠标样式 1.点击示例中心---------地图的创建---------地图属性-------设置鼠标样式右侧有示例代码下图是自己写的代码，需要注意几点（1）官方代码绑定的click事件传递的this 指当前点击元素，但是vue是没有的，在这里可以不传参，也

vue3可视化项目——二维地图的引入

weixin_62639453的博客

02-14

1590

由于项目涉及到地图的引入，需要导入地图组件。这里使用的是echarts开发的地图组件。

vue3+ts 引入高德地图并使用地图选点和搜索

love_weiai的博客

11-02

1629

在index.html引入。创建map.vue组件。

vue地图的引用

你好的博客

08-28

1123

<template> <div> <div id="map_canvas" class="allmap"></div> <div class="allputin"> <img src="../../assets/img/xiao.png" alt /> <...

vue百度地图打点点击当前定位百度地图获取位置信息

03-29

首先需要在Vue项目中引入百度地图JavaScript API。 1. 在`index.html`文件中添加百度地图JavaScript API的引用： ```html  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的AK"></script> ``` 其中，`AK`是你在百度地图开发者中心中申请的密钥。 2. 在Vue组件中添加地图容器和定位按钮： ```html <template> <div>  <div id="map"></div>  <button @click="getLocation">定位</button> </div> </template> ``` 3. 在Vue组件的`<script>`标签中编写JavaScript代码： ```js export default { data() { return { // 地图对象 map: null, // 定位标记 marker: null, // 定位信息 location: null }; }, methods: { // 初始化地图 initMap() { const map = new BMap.Map('map'); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); this.map = map; }, // 获取当前位置信息 getLocation() { const geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition( position => { this.location = position; this.showLocation(); }, { enableHighAccuracy: true } ); }, // 在地图上显示位置信息 showLocation() { const { point, address } = this.location; if (!this.marker) { const marker = new BMap.Marker(point); this.map.addOverlay(marker); this.marker = marker; } else { this.marker.setPosition(point); } this.map.panTo(point); alert(`当前位置：${address}`); } }, mounted() { this.initMap(); } }; ``` 在上述代码中，我们首先定义了`map`、`marker`和`location`三个变量，分别表示地图对象、定位标记和位置信息。在`initMap`方法中，我们创建了一个地图对象并将其初始化。在`getLocation`方法中，我们通过`BMap.Geolocation`获取当前位置信息，并将其保存在`location`变量中。然后我们调用`showLocation`方法，在地图上显示定位标记，并弹窗显示当前位置信息。