当前位置: 首页 > news >正文

vue 使用插件高德地图--vue-amap

 第一步:安装 vue-amap

npm install vue-amap

第二步:在你的 Vue 项目中注册 vue-amap

// main.js
import Vue from 'vue';
import VueAMap from 'vue-amap';Vue.use(VueAMap);VueAMap.initAMapApiLoader({// 高德开发者平台申请key值key: 'cc9c098d8c07c8fbaed05cc8cca2c71c',// plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar' ,'AMap.mapStyle', 'AMap.PolyEditor', 'AMap.CircleEditor'],// 默认高德 sdk 版本为 1.4.4// v: '2.0.0',// theme: 'blue',// mapStyle: 'amap://styles/dark', // 替换为你自己的样式ID
});

 第三步:在你的组件中使用地图点标记里面包含了点击事件

<template><div class="mapClass"><el-amap class="amap-box" ref="map" :amap-manager="amapManager" :vid="'amap-vue'" :zoom="zoom" :plugin="plugin" :center="center" :events="events"><!-- 标记 --><el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :title="marker.title" :content="marker.content"><div @click.stop="showInfoWindows(marker)" class="marker-icon-container"><img style="width: 100%; height: 100%" src="../../static/1.jpg" alt="marker icon" /><view class="">{{ marker.content }}</view></div></el-amap-marker></el-amap></div>
</template>
<script>
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
export default {data() {return {zoom: 17,markers: [{ position: [121.349402, 31.228667], title: 'Marker 1', content: 'This1', icon: 'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.png' },{ position: [121.329402, 31.228667], title: 'Marker 2', content: 'This2', icon: 'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg' }// 添加更多的标记对象...],lng: 0,lat: 0,amapManager: new AMapManager(),loaded: true,center: [121.329402, 31.228667],events: {init: this.handleMapInit,moveend: this.handleMoveEnd,zoomchange: this.handleZoomChange,complete: this.handleMapComplete,click: this.handleClick},plugin: [// {// 	// 定位// 	pName: 'Geolocation',// 	events: {// 		init(o) {// 			// o是高德地图定位插件实例// 			o.getCurrentPosition((status, result) => {// 				if (result && result.position) {// 					// 设置经度// 					this.lng = result.position.lng;// 					// 设置维度// 					this.lat = result.position.lat;// 					// 设置坐标// 					this.center = [this.lng, this.lat];// 					this.markers.push([this.lng, this.lat]);// 					// load// 					this.loaded = true;// 					// 页面渲染好后// 					this.$nextTick();// 				}// 			});// 		}// 	}// }// {// 	// 工具栏// 	pName: 'ToolBar',// 	events: {// 		init(instance) {// 			// console.log(instance);// 		}// 	}// },// {// 	// 鹰眼// 	pName: 'OverView',// 	events: {// 		init(instance) {// 			// console.log(instance);// 		}// 	}// },// {// 	// 地图类型// 	pName: 'MapType',// 	defaultType: 0,// 	events: {// 		init(instance) {// 			// console.log(instance);// 		}// 	}// },// {// 	// 搜索// 	pName: 'PlaceSearch',// 	events: {// 		init(instance) {// 			// console.log(instance)// 		}// 	}// }]};},methods: {handleMapInit(o) {console.log(o.setMapStyle());// console.log(this.$refs.map.$$getInstance())o.getCity((result) => {console.log(result);});// o.setMapStyle('amap://styles/blue');lazyAMapApiLoaderInstance.load().then(() => {// self.initSearch();});},handleMoveEnd() {// 处理 moveend 事件},handleZoomChange() {// 处理 zoomchange 事件},handleMapComplete(o) {console.log(o);// 处理 complete 事件},handleClick(e) {// 处理 click 事件// ... 你的点击事件处理代码 ...console.log('e', e);},showInfoWindows(marker) {console.log('marker');// 在此处处理点击标记后的事件,例如显示信息窗口...}// 你可能还有其他的方法...}
};
</script><style scoped>
.mapClass {width: 400px;height: 400px;/* 根据您的需求设置地图容器的样式 */
}.marker-icon-container {width: 40px;height: 40px;/* 根据您的需求设置标记图标容器的样式 */
}
</style>

相关文章:

vue 使用插件高德地图--vue-amap

第一步&#xff1a;安装 vue-amap npm install vue-amap第二步&#xff1a;在你的 Vue 项目中注册 vue-amap&#xff1a; // main.js import Vue from vue; import VueAMap from vue-amap;Vue.use(VueAMap);VueAMap.initAMapApiLoader({// 高德开发者平台申请key值key: cc9c098…...

减速比如何计算

减速比是用来衡量机械系统中输入轴和输出轴转速之间的比例关系&#xff0c;通常用来描述传动装置&#xff08;如齿轮传动、皮带传动等&#xff09;的效果。计算减速比的公式取决于传动装置的类型。以下是一些常见传动装置的减速比计算方法&#xff1a; 齿轮传动&#xff1a; 对…...

HarmonyOS/OpenHarmony应用开发-ArkTSAPI组件总体分类与说明(下)

六、文本与输入 Text 显示一段文本的组件。 Span 作为Text组件的子组件&#xff0c;用于显示行内文本片段的组件。 Search 搜索框组件&#xff0c;适用于浏览器的搜索内容输入框等应用场景。 TextArea 多行文本输入框组件&#xff0c;当输入的文本内容超过组件宽度时会自动换行…...

势函数和鞅的停时定理

前置芝士 鞅&#xff1a; 鞅是一类特殊的随机过程&#xff0c;假设我们从一开始就在观察一场赌博游戏&#xff0c;现在已经得到了前t秒的观测值&#xff0c;那么当第t1 秒观测值的期望等于第t秒的观测值时&#xff0c;我们称这是一个公平赌博游戏。 具体来说&#xff0c;对于…...

途乐证券-炒股开户流程是怎样的?

炒股是一种危险较大但收益也相对较高的出资方法&#xff0c;而开户则是出资炒股的前提。跟着科技的开展&#xff0c;炒股开户已经能够在线完结&#xff0c;但流程相对来说仍是比较繁琐的。那么&#xff0c;炒股开户流程是怎样的呢&#xff1f;下面从多个视点剖析。 一、炒股开户…...

Eclipse如何设置快捷键

在eclopse设置注释行和取消注释行 // 打开eclipse&#xff0c;依次打开&#xff1a;Window -> Preferences -> General -> Key&#xff0c;...

刷享全球美好 中信银行信用卡推出跨境消费系列活动

来源 | 镭射财经&#xff08;leishecaijing&#xff09; 日前&#xff0c;文旅部办公厅发布通知&#xff0c;恢复全国旅行社及在线旅游企业经营中国公民赴有关国家和地区&#xff08;第三批&#xff09;出境团队旅游和“机票酒店”业务&#xff0c;出境跟团游国家和地区由此前…...

LeetCode算法心得——限制条件下元素之间的最小绝对差(TreeSet)

大家好&#xff0c;我是晴天学长&#xff0c;今天用到了Java一个非常实用的类TreeSet&#xff0c;能解决一些看起来棘手的问题。 1 &#xff09;限制条件下元素之间的最小绝对差 2) .算法思路 初始化变量&#xff1a;n为列表nums的大小。 min为整型最大值&#xff0c;用于记录…...

MySQL表的基础操作(crud)

1. 新增&#xff08;Create&#xff09; insert into 表名 values (值, 值…); 此处列出的这些值,的数目和类型要和表的列相匹配。 -- 在student 表中插入学号1&#xff0c;姓名zhangsan的数据 insert into student values(1, zhangsan); -- 指定列插入 insert into student …...

vue中的activated和deactivated

目录 一、简介二、使用 一、简介 当页面被keep-alive缓存下来的时候&#xff0c;vue提供两个钩子函数 activated被 keep-alive 缓存的组件激活时调用。deactivated被 keep-alive 缓存的组件失活时调用。 当keepalive页面缓存&#xff0c;有activated钩子和created钩子函数时 …...

unity 发布报错 The type or namespace name `UnityEditor‘ could not be found.

引用了UnityEditor的内容&#xff0c;发布当然会报错啦 加上宏判断就好啦...

在ubuntu中将dict.txt导入到数据库sqlite3

将dict.txt导入到数据库 #include <head.h> #include <sqlite3.h> int do_insert(int i,char *str,sqlite3 *db); int main(int argc, const char *argv[]) {//创建泵打开一个数据库sqlite3 *db NULL;if(sqlite3_open("./my.db",&db) ! SQLITE_OK){…...

nginx 代理postgresql

首先&#xff0c;Nginx为我们的数据库增加了额外的安全层。Nginx提供了一整套的选项&#xff0c;这使得管理访问和保护数据库变得很容易。例如&#xff0c;我们可以配置为只有一小部分IP地址可以访问数据库。 PostgreSQL不使用HTTP或HTTPS&#xff0c;而是使用一个新块儿strea…...

小程序 CSS-in-JS 和原子化的另一种选择

小程序 CSS-in-JS 和原子化的另一种选择 小程序 CSS-in-JS 和原子化的另一种选择 介绍快速开始 pandacss 安装和配置 0. 安装和初始化 pandacss1. 配置 postcss2. 检查你的 panda.config.ts3. 修改 package.json 脚本4. 全局 css 注册 pandacss5. 配置的优化与别名 weapp-pand…...

flutter项目 环境搭建

开发flutter项目 搭建工具环境 flutter项目本身 所需开发工具环境 flutter 谷歌公司开发 系统支持库 镜像库 搭建流程&#xff1a; flutter 官网&#xff1a; https://flutter.dev/community/china //步骤1 .bash_profile touch .bash_profile pwd /Users/haijunyan open ~ e…...

PG-DBA培训12:PostgreSQL物理备份与恢复实战

一、风哥PG-DBA培训12&#xff1a;PostgreSQL物理备份与恢复实战 课程目标&#xff1a; 本课程由风哥发布的基于PostgreSQL数据库的系列课程&#xff0c;本课程属于PostgreSQL备份恢复与迁移升级阶段之PostgreSQL物理备份与恢复实战&#xff0c;学完本课程可以掌握&#xff1…...

饿了么大数据开发凉经

1 一个mapreduce进程会启动多少map进程多少reduce进程* 1&#xff09;map数量由处理的数据分成的block数量决定default_num total_size / split_size; 2&#xff09;reduce数量为job.setNumReduceTasks(x)中x 的大小。不设置的话默认为 1。 2 讲下shuffle的过程 shuffle分为…...

前端安全:XSS 与 CSRF 安全防御

在当今数字化的时代&#xff0c;前端安全性变得愈发重要。跨站脚本攻击&#xff08;XSS&#xff09;和跨站请求伪造&#xff08;CSRF&#xff09;是常见的前端安全威胁&#xff0c;但通过一些简单的防御策略&#xff0c;我们可以有效地保护我们的应用程序和用户信息。本文将为您…...

应用层读取wfp防火墙阻断记录

前言 之前的文档中&#xff0c;描写了如何对WFP防火墙进行操作[链接在此]&#xff0c;这篇文档中&#xff0c;描述如何获取WFP防火墙进行阻断的操作记录。 需要注意的坑点 使用FWPM_NET_EVENT_TYPE获取防火墙日志时&#xff0c;需要注意&#xff0c;只有丢弃和内核丢弃&…...

web基础和tomcat的安装,部署jpress应用

目录 1. 简述静态网页和动态网页的区别。 2. 简述 Webl.0 和 Web2.0 的区别。 3. 安装tomcat8&#xff0c;配置服务启动脚本&#xff0c;部署jpress应用。 1. 简述静态网页和动态网页的区别。 【1】定义区别 请求响应信息&#xff0c;发给客户端进行处理&#xff0c;由浏览…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...