Vue2+Web端高德地图

已于 2023-11-17 11:49:49 修改
阅读量233 收藏
点赞数
文章标签： 前端 vue 前端框架
于 2023-11-06 23:58:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Snowyufly/article/details/134257327
版权
本文介绍了如何在Vue2项目中集成高德地图，包括注册高德API，选择Web服务平台，设置域名白名单，使用高德地图组件库@vuemap/vue-amap，安装地图所需的loader环境，创建MapContainer组件并展示不同类型的地图视图，如标准图层、卫星图、路网和路况。
摘要由CSDN通过智能技术生成

1. 先进高德api网址注册https://lbs.amap.com，选择控制台-应用管理-我的应用-创建新应用

服务平台选择web端，域名白名单如果是个人练习使用不用填写，其他需要填写域名

2. 高德地图组件库：

比例尺 | @vuemap/vue-amap (yangyanggu.github.io)

3. 安装loader环境

npm i @amap/amap-jsapi-loader --save

4. component目录下新建MapContainer文件夹，文件夹下创建MapContainer.vue文件

<template>
  <div id="container"></div>
</template>

<script>
最低0.47元/天 解锁文章
Snowyufly
关注
JAVA | Java 解决跨域问题
java_xiaoo的博客
09-19 816
引言 我们在开发过程中经常会遇到前后端分离而导致的跨域问题，导致无法获取返回结果。跨域就像分离前端和后端的一道鸿沟，君在这边，她在那边，两两不能往来. 什么是跨域（CORS） 跨域（CORS）是指不同域名之间相互访问。跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略所造成的，是浏览器对于JavaScript所定义的安全限制策略。 什么情况会跨域 同一协议， 如http或https 同一IP地址, 如127.0.0.1 同一端口, 如8080 以上三个条件中有一个条件不同就会产生
vue2 使用高德地图JSAPI
weixin_45086164的博客
06-01 687
vue2 使用高德地图JSAPI
vue3使用高德地图JSAPI2.0（超详细）
最新发布
bobo979520的博客
08-24 2106
vue3使用高德地图JSAPI2.0（超详细）
Vue2项目使用高德地图
GP2719434241的博客
05-08 4106
在vue2中使用高德地图的一些简单功能
vue2 使用高德地图
maoxiaohei_的博客
07-29 1182
代码】vue2使用高德地图。
高德地图-地图 JS API v2.0-vue3引入
yiyiziupupup的博客
11-09 628
【代码】高德地图-地图 JS API v2.0-vue3引入。
vue+高德地图实现地图搜索及点击定位操作
10-14
在本文中，我们将探讨如何使用Vue.js框架与高德地图API来实现在Web应用中进行地图搜索和点击定位的功能。这个功能对于许多基于位置服务的应用来说是非常关键的，例如导航、本地服务查找等。 首先，我们需要在HTML...
前端系列——vue2+高德地图web端开发（使用和引入）
热门推荐
qq_51553982的博客
02-19 2万+
vue2+高德地图web端开发（使用和引入）前言基础准备工作高德地图的个人开发者注册高德api网址1.点击进行注册2.注册完之后进入控制台3.创建新应用4.添加创建vue2的项目npm 引入高德官方文档1.安装2.进入项目3. NPM 方式安装使用 Loader4.在component目录下新建MapContainer.vue5.编写基础页面结构6. 在< script >中引入AMapLoader7.构建地图7.1data数据声明7.2methods中构建初始化地图方法7.3mouted生命周
前端项目vue3结合高德地图实战，可直接运行
06-02
在本实践项目中，我们利用Vue3框架与高德地图API进行深度整合，构建了一个功能完善的前端应用。这个项目不仅展示了如何在Vue3环境中引入和使用高德地图，还涵盖了地图的基本操作，如显示地图、添加和删除标记点。...
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 5449
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
高德地图JS API升级到2.0版本
weixin_47359038的博客
07-28 1338
项目上反馈高德地图底图信息更新不及时，不利于进行点位规划。经研究发现高德地图JS API 1.4.15版本相对于2.0版本，确实地图切片上的标注信息较少。通过工单的形式询问高德的技术工程师认识到1.4.15版本数据更新有延迟，1.4.15版本地图的数据以季度为周期更新，2.0版本的按月更新。于是将产品中的高德地图从1.4.15版本升级到2.0版本，但是在地图版本升级时碰到了一系列的问题，将碰到的问题以及问题的解决措施记录下来，方面后期的维护工作。
【uniapp】在vue2版本的uniapp上使用npm安装高德地图
小丛的知识窝
03-24 784
【代码】【uniapp】在vue2版本的uniapp上使用npm安装高德地图。
vue中使用高德地图2.0（一）加载地图
JKC_HOWL的博客
09-13 959
vue加载高德地图
html高德地图插件,vue2.0使用高德地图第三方插件
weixin_29235923的博客
06-23 356
一、申请key###点击下边的网址，创建应用，然后申请key，后期要用到，如果已经有key，忽略这一步 http://lbs.amap.com/dev/key/app二、调用高德地图首先在index.html中加入如下引用image.png三、添加配置在build/webpack.base.conf.js 加入如下配置externals: {'AMap': 'AMap','AMapUI':'AMa...
vue2引入高德地图
qq_53957888的博客
10-27 1065
2、在main.js中引入高德地图，key是在高德地图申请的应用key值，version是版本，plugins是需要的插件，可以根据自己的需要从官网加入。4、创建地图对象并调用函数，调用函数时如果在mounted中会导致AMap报错，是因为这时未加载出来AMap，需要设置一个定时器。3、在组件中使用：首先准备一个容器，并设置它的id，需要设置宽度和高度否则是不显示的。其他相同，但是不需要设置到globals中，写法修改为如下。在组件中引入只需要将main.js中的代码移到组件中。
【vue2高德地图api】03-完善展示页，并且调用poi搜索接口
qq_51055690的博客
10-18 287
实现样式效果如图，比较复杂，内容较多。会在api文件夹创建接口，会在components写一个组件，阅读大概10分钟挂载了计算距离方法后，发现页面不报错了，正常运行了为什么不用webJs的poi查询？那个查询可以直接在地图上标点出来。因为没有我所需要的评分，我需要根据评分来排序，如果需要地图显示点，可以用mark批量添加，看到这里相信你已经会基本操作了。mark加标记点我在后面会有一片教程，不过不是批量，不过都差不多，反正都是给经纬度然后整个循环。如果看到这里还是没有正常运行。请检查data变量。
Vue+高德地图api
qq_42155347的博客
05-11 2428
Vue+高德地图api
前端开发攻略---Vue项目(Vue2和Vue3)引入高德地图，超详细，超简单，保姆级教程。
nibabaoo的博客
04-18 5004
Vue项目引入高德地图，超详细，超简单，保姆级教程。
springboot+vue 集成高德地图
05-24
集成高德地图需要分为前端和后端两个部分来实现。 1. 后端实现 - 在 pom.xml 文件中添加高德地图的依赖： ```xml <dependency> <groupId>com.amap.api</groupId> <artifactId>amap-java-sdk</artifactId> <version>1.4.3</version> </dependency> ``` - 在 application.properties 文件中添加高德地图的配置： ```properties # 高德地图配置 amap.key=your amap key ``` - 在 Spring Boot 的配置类中添加以下代码，将高德地图的 key 注入到 bean 中： ```java @Configuration public class AmapConfig { @Value("${amap.key}") private String amapKey; @Bean public AMap aMap() { return new AMap(amapKey); } } ``` - 在 Controller 中编写对外接口，通过调用高德地图 SDK 实现相应的功能。 2. 前端实现 - 在 index.html 中添加高德地图的 JavaScript SDK： ```html <script src="//webapi.amap.com/maps?v=1.4.15&key=your amap key"></script> ``` - 在 Vue 组件中添加地图容器： ```html <template> <div id="map"></div> </template> ``` - 在 Vue 组件的 mounted 方法中初始化地图： ```javascript mounted() { // 初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图 this.map = new AMap.Map("map", { center: [116.397428, 39.90923], zoom: 13 }); } } ``` 这样，就完成了 Spring Boot 和 Vue 的高德地图集成。具体实现可以参考高德地图的官方文档和示例。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值