位置: IT常识 - 正文

vue 高德地图添加多个点标记(vue3使用高德地图)

编辑:rootadmin
vue 高德地图添加多个点标记

推荐整理分享vue 高德地图添加多个点标记(vue3使用高德地图),希望有所帮助,仅作参考,欢迎阅读内容。

vue 高德地图添加多个点标记(vue3使用高德地图)

文章相关热门搜索词:vue 高德地图添加标记点,添加不上,vue 高德地图添加标记点,添加不上,vue3使用高德地图,vue 高德地图添加标记点,添加不上,vue使用高德地图插件,vue 高德地图添加标记点,添加不上,vue 高德地图添加标记点,添加不上,vue 高德地图添加覆盖物和自定义信息窗口,内容如对您有帮助,希望把文章链接给更多的朋友!

新建文件 amap.vue:

<template> <div id="amapcontainer" style="width: 1000px; height: 720px"></div></template><script>import AMapLoader from '@amap/amap-jsapi-loader';window._AMapSecurityConfig = { securityJsCode: '' // '「申请的安全密钥」',}export default { data () { return { map: null, markerList: [], mapList: [ { name: '小王', address: '广东省广州市海珠区', lnglats: [113.312566, 23.085073] }, { name: '小张', address: '广东省广州市黄埔区', lnglats: [113.480794, 23.177896] }, { name: '小李', address: '广东省广州市荔湾区', lnglats: [113.220556, 23.10718] }, { name: '小赵', address: '广东省广州市天河区', lnglats: [113.365438, 23.124231] } ] } }, mounted () { // DOM初始化完成进行地图初始化 this.initAMap() }, methods: { initAMap () { AMapLoader.load({ key: "", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker', 'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap) => { // 获取到作为地图容器的DOM元素,创建地图实例 this.map = new AMap.Map("amapcontainer", { //设置地图容器id resizeEnable: true, zoom: this.zoom, // 地图显示的缩放级别 viewMode: "3D", // 使用3D视图 zoomEnable: true, // 地图是否可缩放,默认值为true dragEnable: true, // 地图是否可通过鼠标拖拽平移,默认为true doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图,默认为true zoom: 11, //初始化地图级别 center: [113.370824, 23.131265], // 初始化中心点坐标 广州 // mapStyle: "amap://styles/darkblue", // 设置颜色底层 }) this.setMapMarker() }).catch(e => { console.log(e) }) }, // 增加点标记 setMapMarker () { // 创建 AMap.Icon 实例 let icon = new AMap.Icon({ size: new AMap.Size(36, 36), // 图标尺寸 image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", // Icon的图像 imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 imageOffset: new AMap.Pixel(0, 0) // 图像相对展示区域的偏移量,适于雪碧图等 }); let makerList = [] this.mapList.forEach((item) => { // 遍历生成多个标记点 let marker = new AMap.Marker({ map: this.map, zIndex: 9999999, icon: icon, // 添加 Icon 实例 offset: new AMap.Pixel(-13, -30), //icon中心点的偏移量 position: item.lnglats // 经纬度对象new AMap.LngLat(x, y),也可以是经纬度构成的一维数组[116.39, 39.9] }); makerList.push(marker) }); this.map.add(makerList) // 自动适应显示想显示的范围区域 this.map.setFitView(); } }}</script><style lang="less"></style>

在需要使用的组件中引入 amap.vue:

<template> <div> <map-container></map-container> </div></template><script>import MapContainer from "@/components/amap";export default { name: "purchannel", components: { MapContainer }, data () { return { } }, watch: {}, created () { }, mounted () { }, methods: { }}</script><style lang="less" scoped></style>

页面效果:

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

上一篇:最小全画幅的数码相机是什么(最小全画幅的数值是多少)

下一篇:antv/g6基本使用教程(antvl7)

  • 快手建立亲密关系怎么弄(快手建立亲密关系有什么用)

    快手建立亲密关系怎么弄(快手建立亲密关系有什么用)

  • 小度在家怎么强制解绑管理员(小度在家rom)

    小度在家怎么强制解绑管理员(小度在家rom)

  • 申请退款可以申请几次(申请退款申请不了怎么办)

    申请退款可以申请几次(申请退款申请不了怎么办)

  • 健康码能转其他手机吗(健康码能转其他城市吗)

    健康码能转其他手机吗(健康码能转其他城市吗)

  • 电脑版怎么下载网页(steam电脑版怎么下载)

    电脑版怎么下载网页(steam电脑版怎么下载)

  • iPhonexr别人电话打不进来(苹果xr别人打电话过来没有声音)

    iPhonexr别人电话打不进来(苹果xr别人打电话过来没有声音)

  • 华为p40pro屏幕容易碎吗(华为p40pro显示屏多大)

    华为p40pro屏幕容易碎吗(华为p40pro显示屏多大)

  • 系统声音和麦克风声音区别(系统声音和麦克风声音哪个好)

    系统声音和麦克风声音区别(系统声音和麦克风声音哪个好)

  • airpods双击能接微信电话吗(airpods双击要很用力吗)

    airpods双击能接微信电话吗(airpods双击要很用力吗)

  • 计算机网络病毒来源(计算机网络病毒的传播途径)

    计算机网络病毒来源(计算机网络病毒的传播途径)

  • 华为畅连通话图标如何去除(华为 畅连通话)

    华为畅连通话图标如何去除(华为 畅连通话)

  • 国外手机为什么在中国用不了(国外手机为什么很少双卡双待)

    国外手机为什么在中国用不了(国外手机为什么很少双卡双待)

  • 苹果x可以双开微信吗(苹果x可以开双屏吗)

    苹果x可以双开微信吗(苹果x可以开双屏吗)

  • 屏蔽好友是什么意思(屏蔽此人是删除好友吗)

    屏蔽好友是什么意思(屏蔽此人是删除好友吗)

  • 手机qq音乐怎么导入电脑(手机qq音乐怎么投屏到电视上)

    手机qq音乐怎么导入电脑(手机qq音乐怎么投屏到电视上)

  • word2019邮件在哪看(word邮件在哪)

    word2019邮件在哪看(word邮件在哪)

  • 数字证书的主要功能(数字证书的主要类型)

    数字证书的主要功能(数字证书的主要类型)

  • 智能卡是什么东西(智能卡百科)

    智能卡是什么东西(智能卡百科)

  • 咸鱼怎么关注别人账号(闲鱼上怎么关注其他人)

    咸鱼怎么关注别人账号(闲鱼上怎么关注其他人)

  • 如何制作闪照照片(怎么制闪照)

    如何制作闪照照片(怎么制闪照)

  • ght交易密码怎么设置(ght交易密码怎么改)

    ght交易密码怎么设置(ght交易密码怎么改)

  • 华为怎么看是不是翻新机(华为怎么看是不是超级快充)

    华为怎么看是不是翻新机(华为怎么看是不是超级快充)

  • 华为nova5pro是双卡双待吗(华为nova5pro是双层主板吗)

    华为nova5pro是双卡双待吗(华为nova5pro是双层主板吗)

  • 在 AI 上训练 AI:ChatGPT 上训练另一种机器学习模型(ai训练流程)

    在 AI 上训练 AI:ChatGPT 上训练另一种机器学习模型(ai训练流程)

  • ntptrace命令  追踪NTP服务器链(ntpd命令)

    ntptrace命令 追踪NTP服务器链(ntpd命令)

  • 开发票,对方收取税点,如何计算
  • 招标押金如何做账务处理?
  • 公司零星支出没有发票收据怎么开
  • 电梯广告租赁属于哪类
  • 在公司交社保不满十年,女性按照什么退税
  • 以前月份暂估成本怎么冲
  • 税款差0.01是怎么用会计分录处理
  • 房产税没交会怎么样
  • 税局代开专票对方隔月退回重开如何做账务处理呢?
  • 新企业会计准则的内容
  • 生产企业外购商品经过加工
  • 开完红字发票后,正数发票如何开具?
  • 提前还款罚息是多少
  • 年终奖第二年才发怎么计算个税在个税app
  • 在线负利计算器
  • 股权变更之后税务变更
  • 客户付货款给我们公司备注往来结算款
  • 给客户退差价怎么说
  • 在建工程的工资计入哪里
  • 个人报销汽油费会计分录
  • 应收股利属于其他业务吗
  • 哪些税金计入存货成本
  • 机动车销售发票如何认证抵扣?
  • 如何查出账外收入
  • 财务负责人的岗位
  • 虚拟机安装苹果系统全过程
  • mac怎么设置快捷图标
  • 鸿蒙系统获取电脑文件
  • 发出委托加工物资
  • 如何编制处置固定资产
  • 期末余额和期初余额
  • 制造费用结转到生产成本
  • 实收资本可以大于注册资本嘛
  • 零代码开发工具
  • 前端字符长度限制
  • 企业的民间借贷合法吗
  • 工程竣工结算和决算的区别
  • file*fp什么意思
  • php后端开发流程教程
  • 营业收入包括应收账款吗
  • php+mysql+jquery实现日历签到功能
  • 既简单又安全的小实验
  • php远程调用
  • 用人单位招用失业人员补贴
  • 金税盘全额抵扣政策
  • 应收账款坏账准备计提方法
  • 配电室增容验收标准
  • 计提和支付可以录在一张凭证吗
  • 小规模企业所得税怎么征收
  • 佣金的会计如何计算
  • 工程施工的间接费用如何归集分配
  • 市政绿化工程的施工方案
  • 结汇时和月底结转汇兑损益
  • 企业成本核算项目以及成本核算流程
  • 施工总包能分包土方吗
  • 公允价值变动损益
  • 流动资金周转次数计算公式
  • 会计核算是否健全划分为
  • 营改增后计税依据
  • mysql5.7.24安装配置教程
  • macos怎么操作
  • Windows Server 2008下Backup功能全通透
  • freebsd安装教程
  • bios中英文对照表图新版
  • 详细介绍的英文
  • macbookairfacetime
  • CentOS 5.4+OpenVZ+Vtonf打造VPS服务器的方法
  • linux 网站备份
  • 在windows中如何设置行间距
  • 打开安全启动
  • linuxvi编辑器三种模式
  • win7如何安装kb3033929补丁
  • ios平台中glsl中shadow2DProjEXT函数的简单说明以及变换矩阵的小注意点
  • android EditText 需要输入文本时调不出来软键盘 解决方案(亲测有效)
  • 在windows 10中
  • 安卓竖屏改横屏
  • jquery网页
  • 北京税务局网站
  • 延期申报预缴税款滞纳金问题
  • 江西省抚州市黎川县洵口镇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设