位置: 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项目部署与测评

  • matebook13和13s有什么区别(华为matebook13与matebook13s区别)

    matebook13和13s有什么区别(华为matebook13与matebook13s区别)

  • 华为如何扫描图片转化为文字(华为如何扫描图片为pdf)

    华为如何扫描图片转化为文字(华为如何扫描图片为pdf)

  • RedmiK30如何装SIM卡(redmik30怎么插卡)

    RedmiK30如何装SIM卡(redmik30怎么插卡)

  • 怎么开启手机强制运行(手机强纸)

    怎么开启手机强制运行(手机强纸)

  • 手机qq撤回的图片怎么看(手机qq撤回的图片在哪个文件夹)

    手机qq撤回的图片怎么看(手机qq撤回的图片在哪个文件夹)

  • 全民k歌怎么不让qq好友看到(全民k歌怎么不让某个人看到)

    全民k歌怎么不让qq好友看到(全民k歌怎么不让某个人看到)

  • 接受短信会产生费用么(接受短信会产生流量吗)

    接受短信会产生费用么(接受短信会产生流量吗)

  • 空调压缩机不停机是怎么回事(空调压缩机不停是怎么回事)

    空调压缩机不停机是怎么回事(空调压缩机不停是怎么回事)

  • 知乎访问别人主页有记录吗(知乎访问别人主页安全吗)

    知乎访问别人主页有记录吗(知乎访问别人主页安全吗)

  • 微信啥时候开始推广的(微信啥时候开始实名制的)

    微信啥时候开始推广的(微信啥时候开始实名制的)

  • vieal10是什么手机(v10是什么牌子的手机)

    vieal10是什么手机(v10是什么牌子的手机)

  • 苹果自录视频功能在哪(苹果自己录视频怎么设置)

    苹果自录视频功能在哪(苹果自己录视频怎么设置)

  • 两微一端是指什么(两微一端是什么)

    两微一端是指什么(两微一端是什么)

  • 天猫会员有什么好处(天猫会员有哪些权益及优惠)

    天猫会员有什么好处(天猫会员有哪些权益及优惠)

  • 网易云怎么识别音乐(网易云怎么识别本地音乐)

    网易云怎么识别音乐(网易云怎么识别本地音乐)

  • 苹果11pro怎么信任软件(iphone11pro信任在哪里设置)

    苹果11pro怎么信任软件(iphone11pro信任在哪里设置)

  • b站投屏怎么带上弹幕(b站怎么能投屏)

    b站投屏怎么带上弹幕(b站怎么能投屏)

  • iphone11相机怎么用(iphone11相机怎么调参数)

    iphone11相机怎么用(iphone11相机怎么调参数)

  • airpods耳机6s能用吗(airpods2 6s可以用吗)

    airpods耳机6s能用吗(airpods2 6s可以用吗)

  • 小米8青春版有128G吗(小米8青春版有120帧吗)

    小米8青春版有128G吗(小米8青春版有120帧吗)

  • 小米mix3支持40w快充吗(小米mix3支持5g吗)

    小米mix3支持40w快充吗(小米mix3支持5g吗)

  • 3dmax顶部编辑栏不见了(3dmax右侧编辑栏怎么固定)

    3dmax顶部编辑栏不见了(3dmax右侧编辑栏怎么固定)

  • 以前的手机号怎么找回(以前的手机号怎么补办回来)

    以前的手机号怎么找回(以前的手机号怎么补办回来)

  • 电脑音响和耳机同时用(电脑音响和耳机都没声音怎么办)

    电脑音响和耳机同时用(电脑音响和耳机都没声音怎么办)

  • 修改一寸照片底色(如何修改一寸照片底色)

    修改一寸照片底色(如何修改一寸照片底色)

  • Vue实现记住账号密码功能(vue注册用户名和密码)

    Vue实现记住账号密码功能(vue注册用户名和密码)

  • 独资企业赚的钱全是老板的吗
  • 利率 税率
  • 出售固定资产简易计税账务处理
  • 以前年度多计管账怎么做
  • 一般纳税人季报是哪几个月报税
  • 广告制作要交文化部门吗
  • 金税盘地区编号查询
  • 实收资本印花税税率多少
  • 公司取现需要带什么东西
  • 互联网公司如何盈利
  • 小规模销售收入要做销项税额吗
  • 一次性预收租金增值税
  • 营改增后哪些费用可以抵扣
  • 住宿费机打发票税率多少
  • 卖下脚料怎么做分录
  • 房屋维修基金怎么入帐
  • 利润表中企业所得税
  • 小微企业免征增值税优惠
  • 进项税和销项税税率一样吗
  • 土地使用权与房屋所有权不一致
  • 土地作价入股是否视为土地转让
  • 信用卡核销是什么意思
  • 贷款损失准备如何提取
  • 已经认证抵扣的发票会计分录
  • mac电脑怎么转移到另一个电脑
  • 映泰主板系统重装
  • 出纳违规支付承担啥责任?
  • deepin怎么退出命令行
  • php正则匹配字符串
  • 存出投资款要计入现金流吗
  • 发票失控进项转出所得税
  • 招待客户住宿的句子
  • tdxcef.exe进程
  • 如何申请公积金装修房子
  • 增值税纳税筹划案例最新
  • 在建工程计提减值准备计入什么科目
  • vue的watch不生效
  • 在申报季度企业所得税时,残疾人工资可以加计扣除吗
  • 微信小程序开发完整项目
  • php实现递归
  • mysql常用命令行大全
  • 凭证摘要写错了已经结账
  • 银行回单打回来会计要做什么
  • 供应商的质量扣款应该开什么发票
  • phpcms 标签
  • 报销货物运输费需要什么凭证
  • 企业残保金计提分录
  • 交通费 抵扣
  • 预提费用会计科目
  • 增值税延期滞纳金计算
  • 企业固定资产内部控制审计研究论文
  • 个体小企业怎么缴纳个人所得税
  • 应收账款在贷方为负数表示什么
  • 外商投资的企业有哪些
  • 留样产品的保存期限
  • 转账手续费没有发票能税前扣除吗
  • 个体工商户个税怎么申报
  • xp系统的输入法在哪里设置
  • page文档的排版技巧
  • win8.1安装过程
  • 制作winxp启动u盘和安装盘
  • centos查看具体版本
  • WIN10更新WIN11卡在63%
  • 只需2招 让Win10运行速度更加迅速
  • 玩大型游戏时CPU多少度正常
  • opengl光照纹理三个球
  • javascriptcsdn
  • css兼容性写法
  • 修改系统用户名为英文
  • python获取当前日期的前一天
  • js处理时间格式
  • javascript页面布局
  • mvp 框架
  • js 类的继承
  • springmvc接收json需要配
  • 北京大兴区地税局电话
  • 消费税是含税价
  • 医院等级怎么查询系统
  • 青岛网上申请个体工商户
  • 小规模纳税人的增值税怎么计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设