位置: IT常识 - 正文

在vue3项目中使用新版高德地图(vue3项目中使用el-dialog)

编辑:rootadmin
在vue3项目中使用新版高德地图

推荐整理分享在vue3项目中使用新版高德地图(vue3项目中使用el-dialog),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3项目中使用el-dialog,vue项目使用rem,vue3项目中使用vue2组件,vue3项目中使用高德地图,在vue3项目中使用vue2,vue3项目中使用代码编辑工具,在vue3项目中使用vue2,vue3项目中使用el-dialog,内容如对您有帮助,希望把文章链接给更多的朋友!

高德开发平台 : 高德开放平台 | 高德地图API (amap.com)

1. 首先你要注册好账号登录

2. 获取key和密钥 

在vue3项目中使用新版高德地图(vue3项目中使用el-dialog)

 

自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode 一起使用

NPM方式安装和使用(基础版):        按 NPM 方式安装使用 Loader :npm i @amap/amap-jsapi-loader --save        在页面中通过NPM 方式安装的使用 :<template> <div class="app-container"> <div style="background-color: #ffffff;"> <div id="container"></div> </div> </div></template><script setup>import AMapLoader from '@amap/amap-jsapi-loader';/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/import { shallowRef } from '@vue/reactivity';import {ref} from "vue";// const map = shallowRef(null);const path = ref([]);const current_position = ref([]);function initMap() { window._AMapSecurityConfig = { securityJsCode: '8e920f73eb2e6880a92ea6662eefc476', } AMapLoader.load({ key:"e4e3d44a98350790a1493450032bbec5", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ const map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:13, //初始化地图级别 center:[113.808299,34.791787], //初始化地图中心点位置 }); }).catch(e=>{ console.log(e); })} initMap()</script><style>#container{ padding:0px; margin: 0px; width: 100%; height: 800px;}</style>完整代码:<template> <div class="app-container"> <div style="background-color: #ffffff;"> <div id="container"></div> </div> </div></template><script setup>import AMapLoader from '@amap/amap-jsapi-loader';/*在Vue3中使用时,需要引入Vue3中的shallowRef方法(使用shallowRef进行非深度监听,因为在Vue3中所使用的Proxy拦截操作会改变JSAPI原生对象,所以此处需要区别Vue2使用方式对地图对象进行非深度监听,否则会出现问题,建议JSAPI相关对象采用非响应式的普通对象来存储)*/import { shallowRef } from '@vue/reactivity';import {ref} from "vue";// const map = shallowRef(null);const path = ref([]);const current_position = ref([]);function initMap() { window._AMapSecurityConfig = { securityJsCode: '8e920f73eb2e6880a92ea6662eefc476', } AMapLoader.load({ key:"e4e3d44a98350790a1493450032bbec5", // 申请好的Web端开发者Key,首次调用 load 时必填 version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 // plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ const map = new AMap.Map("container",{ //设置地图容器id viewMode:"3D", //是否为3D地图模式 zoom:13, //初始化地图级别 center:[113.808299,34.791787], //初始化地图中心点位置 }); // 添加插件 AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye","AMap.Geolocation","AMap.MapType","AMap.MouseTool"], function () { //异步同时加载多个插件 // 添加地图插件 map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件 map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺 map.addControl(new AMap.HawkEye()); // 显示缩略图 map.addControl(new AMap.Geolocation()); // 定位当前位置 map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换 // 以下是鼠标工具插件 const mouseTool = new AMap.MouseTool(map); // mouseTool.rule();// 用户手动绘制折线图,测量距离 mouseTool.measureArea(); // 测量面积 }); // 单击 map.on('click',(e) => { // lng ==> 经度值 lat => 维度值 current_position.value = [e.lnglat.lng,e.lnglat.lat]; path.value.push([e.lnglat.lng,e.lnglat.lat]); // addMarker(); // addPolyLine(); }) // 实例化点标记 // 第一种(封成函数来触发) function addMarker() { const marker = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记 // 通过设置 offset 来添加偏移量 offset: new AMap.Pixel(-26, -54), }); marker.setMap(map); } // 第二种 直接写死 position 的经纬度值 /*const marker = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: [113.808299,34.791787], // 通过设置 offset 来添加偏移量 offset: new AMap.Pixel(-26, -54), }); marker.setMap(map);*/ // 折线 function addPolyLine() { const polyline = new AMap.Polyline({ path: path.value, isOutline: true, outlineColor: "#ffeeff", borderWeight: 1, strokeColor: "#3366FF", strokeOpacity: 0.6, strokeWeight: 5, // 折线样式还支持 'dashed' strokeStyle: "solid", // strokeStyle是dashed时有效 // strokeDasharray: [10, 5], lineJoin: "round", lineCap: "round", zIndex: 50, }); map.add([polyline]); } }).catch(e=>{ console.log(e); })}initMap()</script><style>#container{ padding:0px; margin: 0px; width: 100%; height: 800px;}</style>地图插件效果图:实例化点标记 :

        第一种方式效果:

         第二种方式效果:

 矢量图 --> 折线:

本文链接地址:https://www.jiuchutong.com/zhishi/298570.html 转载请保留说明!

上一篇:nodejs安装和环境配置-Windows(nodejs安装及环境配置win10)

下一篇:玩转ChatGPT:中科院ChatGPT Academic项目部署与测评

  • 出口退税的条件有哪些
  • 减资需要的资料
  • 什么是宏观税负如何判定一国宏观税负的轻重
  • 资产负债表上应付账款根据什么填制
  • 转账支票必须对着开发票单位吗?
  • 建筑企业一般纳税人提供建筑服务属于老项目
  • 无形资产租赁税率多少
  • 不经常发生应税行为的企业可以选择按小规模纳税人纳税
  • 合伙人退伙怎么处理
  • 公立医院规章制度
  • 企业公益救济性工作总结
  • 500人的公司财务部几人
  • 投资股权转让需要注意什么?
  • 冲销暂估入库的会计分录
  • 苹果电脑怎么升级系统到最新版本
  • 员工意外伤害保险范围
  • 旅游费用账务处理
  • 什么叫经济作物和粮食作物
  • 发票冲红怎么开具
  • 劳务费费用
  • 土地增值税清算收入如何确定
  • php数组函数 菜鸟
  • 保险多扣一个月
  • 对视同销售行为应如何进行税务处理
  • 定向增发后送股成本价
  • 超支福利费按什么计提
  • win10默认网关不可用总掉线解决方法
  • 从午夜穹顶看育空河,加拿大育空道森市 (© Robert Postma/Getty Images)
  • php执行脚本
  • 衍生工具主要用途
  • php页面跳转方法
  • html+css+js网页设计期末作业付源码
  • 存货盘盈的账务处理入什么费用
  • 债权收益权转让
  • 事业单位财政拨款收入会计分录
  • 新旧会计准则对比
  • 库存现金写三栏式明细账还是写现金日记账还是两个都写
  • sqlserver 15247
  • sqlserver行列转换多行多列
  • 金税四期何时上线
  • 买赠业务税务处理
  • 一次性医疗补助金怎么计算
  • 纳税人将购买的货物分配给股东,因该货物购买时已缴纳
  • 社会团体会员费怎么入账
  • 建筑企业收挂靠公司的管理费如何做账?
  • 应付给股东的利润是什么科目
  • 按工人工资比例结转制造费用会计科目
  • 学校收到学生的礼物
  • 减免税款借方有利息吗
  • 税控设备设置在哪儿
  • 联营企业和子公司哪个好
  • 给职工发放的米面油记入什么
  • centos 安装chia
  • win10无internet怎么办
  • winxp如何将两个分区合并成一个分区
  • jsp环境变量配置的步骤
  • win8系统无线网络图标不见了
  • win8的安全中心
  • win8系统怎么设置开机密码
  • linuxzen
  • 注册win7账号
  • 关闭linux命令
  • android知识
  • 高通ar芯片
  • android系统架构图
  • node 执行js
  • Android性能优化工具
  • web开发css
  • unity3d物体碰撞
  • javascript要怎么学
  • python生成器有几种写法
  • nodejs test
  • jquery表单事件验证表单
  • android退出功能
  • 个人所得税父母双方专项扣除
  • 立信金融会计学院
  • 落实与什么动词搭配
  • 集团收管理费开什么发票
  • 国税系统打印不了发票怎么办
  • 国家税务总局中山市税务局港口税务分局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设