位置: 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)

  • 旧机器设备出口
  • 一般纳税人委托其他单位加工材料收回后直接对外销售的
  • 员工为公司垫付款项
  • 预收账款怎么做财务分析报告
  • 某项目全部投资资金的40%由银行贷款
  • 航天金税盘证书口令错误
  • 个人自产自销农产品免税政策
  • 新公司成立后需要办理导航业务吗
  • 常见的税收优惠
  • 发票过期了还能抵扣吗
  • 软件 退税
  • 购物中心联营扣点
  • 委托开发的软件产品即征即退
  • 企业食堂买东西怎么入账
  • 往来核算在会计哪个科目
  • 公司购入的房子如何抵押
  • 项目一次性奖励会计分录怎么处理
  • 无形资产研究费用计入成本么
  • 增值税普通发票税率
  • 印花税资金账簿税率是多少
  • 西部大开发政策2020到期
  • 季报资产负债表和利润表的勾稽关系
  • 利息 财务费用
  • 外币报表折算差额为负数代表
  • 商誉摊销法的优缺点
  • 新会计准则规定资产如何入账
  • 财务报表包含哪些表
  • 库存商品结转成本
  • 上年超额广告费会计分录
  • 库存商品赠送会计分录
  • 预提电费及电费发票到账的会计分录
  • 微信小程序实现发红包
  • php ftell
  • php对象是什么类型的数据
  • 增值税的类型主要有哪些
  • 企业清算所得税政策
  • php获取指定数量的数据
  • yolov5l
  • php自定义表单
  • 购买土地需要缴纳增值税吗
  • 增值税专票和普票的区别图片
  • python中chr函数介绍
  • 财务报表中的净资产在哪里
  • 第四季度所得税跟汇算清缴是一样吗
  • 如何在Access中设置有效性规则必须大于等于0
  • 增值税进项税额加计抵减会计处理
  • 残保金怎么计提和缴纳
  • 公司账户取出来要交税吗
  • 增值税纳税申报表在哪里查询
  • 公司与公司的往来款计入什么科目
  • 评估增值净利润调减
  • 分期收款发出商品是什么意思
  • 印花税每个月都计提吗
  • 员工报销固定资产怎么算
  • 劳务派遣公司小规模纳税人如何开票
  • 购买固定资产记账
  • 冲减上月收入会计分录
  • 注册资金没有到位
  • 明细分类核算的依据是什么
  • 管理费用算产品成本吗
  • 跨年度费用如何计算
  • win7系统命令激活
  • windows2000自动登陆
  • ubuntu没有wlan0
  • win7安装sqlserver2000没反应
  • xp系统java环境变量配置
  • win8系统运行慢怎么办
  • linux在服务器领域的应用状况
  • cocos creator 碰撞检测
  • opengl 投影矩阵
  • jq拖拽div替换位置
  • shell脚本实现文件管理
  • [置顶]星陨计划
  • js中key
  • 带酒回国需要申报吗
  • 浙江省税务局领导介绍
  • 国家税务贵州省税务
  • t+怎么取消记账凭证
  • 税金乘以12%是什么
  • 什么是增值税税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设