vue高德地图

最新推荐文章于 2024-08-21 16:17:14 发布
最新推荐文章于 2024-08-21 16:17:14 发布
阅读量1.1k 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Henry_Wu001/article/details/123751238
版权

Vue3

Vue3 起步 | 菜鸟教程

介绍 | Vue.js

Visual studio code

Documentation for Visual Studio Code

element-plus

安装 | Element Plus

npm install element-plus --save

js和vue方法的相互调用

在js里调用vue方法

我们需要把方法注册到vue对象之外的页面，所以对与在methods中定义的方法，需要在mounted中注册给window。之后我们可以在js里直接调用，

在vue里调用js方法

直接使用window.方法名就可以调用

 

组件间数据通信

Vue子组件中 data 从props中无法动态更新数据问题_长安有故里，安河桥有你的博客-CSDN博客_vue的props数据不更新问题

插件使用，第三方库

插件 | Vue.js

app use后可以在整个app中使用无需再import了,

axios如此,可以加个this。

高德地图

兼容高德原生 SDK | @vuemap/vue-amap

没有用上原生sdk

原生sdk示例:

两点间距离-距离/面积计算-示例中心-JS API 示例 | 高德地图API

调试

在 VS Code 中调试 — Vue.js

Vue3中使用调试工具 Vue.js Devtools - 清和时光 - 博客园

发布

模式和环境变量 | Vue CLI

相对路径问题:

vue打包使用相对路径 - 幸福安康 - 博客园

 

资源

GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

Henry_Wu001
关注
专栏目录
vue使用高德地图
q12as的博客
12-01 639
2、在vue.config.js文件中添加。1、在index.html文件中引入。
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制；...5：支持根据图形数据显示到地图上，进行后续操作（删除，编辑）； 6：支持获取绘制后的所有覆盖物数据，并返回； 7：支持封装为单个组件，多处调用；
vue + 高德地图
何时林听@
04-07 818
vue使用高德地图示例
vue3接入高德地图
oqqgZuo1的博客
08-21 2189
const map = new AMap.Map("container",{ //设置地图容器id。version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15。// plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等。center:[117.120000,36.650200], //初始化地图中心点位置。viewMode:"3D", //是否为3D地图模式。
在Vue中使用高德地图
热门推荐
zhanghuaiwei
08-01 3万+
web端使用高德地图，实现多图形绘制和清除；获取经纬度；关键词搜索定位等
在vue项目中使用高德地图
qq_41585169的博客
06-30 2073
【代码】在vue项目中使用高德地图。
vue 调用高德地图
weixin_30555753的博客
04-27 196
一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 这个就不细说了，按照其文档，就能够安装下来。 二. 按照官方提供的方法引入 这是项目例子的地址 我的github 预览地址 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk...
vue高德地图之玩转周边
08-30
使用 Vue 高德地图实现周边搜索功能 本文将指导读者使用 Vue 高德地图实现周边搜索功能，包括引入高德 API、使用地图的周边插件、构建查询方法、将 maker 的切换事件绑定在 footer 下的各个选项中等。 1. 引入高德...
vue中使用高德地图-加载高德地图几种方法
03-12
### vue中使用高德地图-加载高德地图几种方法 #### 一、前言与基础知识 在当前的应用开发中，地图服务已经成为了不可或缺的一部分。无论是网约车应用还是生活服务类应用，地图服务都提供了强大的功能支持。本文将...
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
vue项目引入高德地图
06-19
在vue项目中，添加高德地图。对开发地图的开发人员有一定帮助
Vue项目使用高德地图
qq_45693419的博客
02-23 1833
在一些简单的大屏类展示应用/网页中，经常会用到地图相关的展示场景，除了一些特殊的三维场景需要用Gis/BIM或者WebGL，一些简单的业务就可以直接使用高德地图或者百度地图来完成。本文主要讲述在Vue项目中高德地图的引用方式以及一些简单的API的使用。演示项目使用脚手架搭建项目。
vue项目中使用高德地图
qq_56902210的博客
11-21 742
vue使用高德地图
vue中使用高德地图
牛马程序员进阶之路
07-07 3417
使用高德地图在vue中完成功能：单一某省的地图，3D地图展示，3D模型在地图加载并展示，地图上绘制圆圈。
vue 高德地图
海绵宝宝
08-20 225
vue编写高德地图
VUE+高德地图
在这个地方会介绍一些前端和后端的开发内容，暂时以springBoot和Vue为主。
07-22 313
vue+高德地图
vue 高德地图geojson
最新发布
09-11
Vue 高德地图（AMap Vue）是一个结合了 Vue.js 和高德地图 API 的库，它使得在 Vue 应用程序中集成高德地图变得简单。当你需要处理地理空间数据时，GeoJSON (Geometrical Object Encoding JSON) 就很有用了，它是一种轻量级的数据交换格式，用于表示地理特征如点、线、面。 在 Vue 中使用 AMap 地图和 GeoJSON，你可以这样做： 1. **引入依赖**：首先，你需要安装 `vue-amap` 和 `axios` 或其他适合获取 GeoJSON 数据的工具库。 ```bash npm install vue-amap axios ``` 2. **配置地图实例**：在 Vue 组件中初始化高德地图，并设置地图容器。 ```html <amap :center="mapCenter" :zoom="mapZoom"> <!-- ... --> </amap> ``` 3. **加载并解析 GeoJSON**：通过 `axios` 获取 GeoJSON 数据，然后在响应处理函数中将其转换成可识别的地理信息。 ```javascript data() { return { mapCenter: [116.404, 39.915], // 北京坐标 mapZoom: 8, geojData: {} // 存放解析后的GeoJSON数据 } }, async mounted() { const response = await axios.get('your.geojson.url'); this.geojData = AMap.parseGeoJson(response.data); this.addGeoFeatures(); } ``` 4. **添加地理特征**：解析后的 GeoJSON 对象可以作为参数传递给 `addGeoFeatures` 函数，它会将 GeoJSON 特征添加到地图上。 ```javascript methods: { addGeoFeatures() { this.geojData.features.forEach(feature => { const marker = new AMap.Marker({ position: feature.geometry.coordinates, draggable: false, // 可选，是否可拖拽 icon: 'iconUrl', // 自定义图标URL }); marker.setMap(this.map); }); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值