关于使用高德地图api引入icon或者设置content加载不出图标

高德地图选择点位改变图标 在data里面定义一个数组 我的叫marks这里在循环的时候将新增的marker全都push到marks中这里添加到数组里有两点好处1. 便于下次搜索添加新点位之前 清除掉上次搜索增加点位this.map.remove(this.marks) // 清除点位所以每次调用查询方法时 将之前增加点位移除 并将该数组清空2. 便于修改图标// 每次点击 将点位数组循环 将图标修改成统一图标}))})// 然后单独修改点击点位图标 即可}))}) 阅读详情
AI摘要

本文介绍了在使用高德地图API时遇到图标加载失败的问题及解决办法。通过HTTP请求远程服务器上的图片资源、将图片转换为Base64格式内嵌在代码中以及使用require动态加载本地图片等方法,有效解决了图标加载不显示的问题。

最近使用高德地图ai直接按照官网上面修改icon的图标
如像这样直接使用在这里插入图片描述
或者这样间接引用在这里插入图片描述
结果都加载不出来,像这样在这里插入图片描述
后来才发现不能这么直接引入,

  1. 可以通过http请求通过请求服务器上面的icon图片,像这样:
icon:"https://editor.youkuaiyun.com/markers/marker.png"
  1. 可以通过将图片转成base64格式,然后再请求
  2. 如果请求本地的图片,因为路径是动态请求过来的,所以拼接要用require来请求,这也是用的最多的。
 let img =require("../assets/images/marker.png");
 marker = new AMap.Marker({
                    map: this.map,
                    icon: new AMap.Icon({
                        image: img,
                    }),
                });

如果还有其他方法欢迎补充

【VUE-AMap】记录一下VUE使用高德地图,用于公司官网,显示公司定位时,自定义图标不显示的问题 VUE 编写高德地图,自定义Mark图标不显示的问题 阅读详情

相关推荐

避坑指南:ThingsBoard自定义地图Widget从开发到部署的全流程(以高德地图为例)

本文详细介绍了在ThingsBoard平台中开发与部署高德地图Widget的全流程,涵盖从TypeScript编码、Widget打包到生产环境部署的关键步骤。针对前端资源编译、密钥安全管理等核心挑战提供解决方案,并分享性能优化与缓存策略,帮助开发者高效实现工业物联网场景下的地图集成。

weixin_30617695的博客 437

高德地图 关于使用动态路径的图标icon无法显示的问题

更新为以下代码后图标可以显示。1.原代码,图标显示不出来。

qq_54258658的博客 1261

从零到一:在UniApp App中集成高德地图SDK与核心功能实战

本文详细介绍了在UniApp中集成高德地图SDK的全过程,包括前期准备、基础地图集成、核心功能实现及常见问题解决。通过实战案例,帮助开发者快速掌握高德地图在UniApp中的定位、标记点、路线规划等核心功能,提升App开发效率。

weixin_33951761的博客 469

高德地图开发-- 自定义图标

概述: 参考高德API:点标记 1、分析高德例子 自定义图标 var infoWindow; var map = new AMap.Map("container", { resizeEnable:true, center:[116.473188,39.993253], zoom:13 })

往前的娘娘 9987

从零构建校园导览APP:Android+SpringBoot+高德地图全栈开发实战

在移动应用开发领域,地图服务集成与路径规划是构建LBS(基于位置服务)应用的核心技术。其原理在于通过GPS、网络定位获取设备坐标,并利用地图SDK提供的API进行地理信息可视化与路线计算。这项技术的价值在于能够将抽象的坐标数据转化为直观的导航指引,极大提升了用户在陌生环境中的空间感知与移动效率。其应用场景广泛,从商业外卖配送、共享出行到智慧城市管理均离不开它。本文聚焦于一个具体的工程实践——校园导览系统开发,详细阐述了如何整合Android客户端、SpringBoot后端与高德地图服务,实现从定位、地图展示

weixin_30596735的博客 774

地图API选型与实战:从高德百度到Google Mapbox的避坑指南

地图API是现代应用开发中实现位置服务与地理可视化的核心技术组件,其本质是将地理坐标数据转化为用户可交互的地图界面。其工作原理通常基于瓦片地图、地理编码和路径规划算法,通过RESTful API或JavaScript SDK为开发者提供服务。这项技术的核心价值在于为各类应用提供精准的空间数据支持,极大提升了涉及地理位置功能的开发效率与用户体验。在应用场景上,它广泛服务于出行导航、物流配送、本地生活服务、房产展示及社交应用等多个领域。本文聚焦于地图API的选型策略与工程实践,系统对比了高德、百度、腾讯等国内主

weixin_30644369的博客 417

高德地图API 添加标点 自定义标点

高德地图API 添加标点 自定义标点 在我们创建完地图实例后,就可以在地图中添加遮盖物,覆盖物有多种类型,今天只说点标记 首先构造一个点标记 添加默认样式点标记 // 构造点标记 var marker = new AMap.Marker({ position: [116.405467, 39.907761] // 点标记在地图上显示的位置,数组内对应经纬度 }); // 将点标记添加到地图map上 map.add(marker); 添加自定义样式点标记(注意:icon实例中的image请求本地

祝贺 4243

Google Maps API 实战:从零构建交互式地图与成本控制指南

在Web开发中,地图可视化是展示地理位置信息的核心技术,广泛应用于本地服务、物流追踪、旅行社交等场景。其原理是通过调用地图服务API,将地理坐标数据渲染为可交互的图形界面,实现拖拽、缩放、标记等基础功能。这项技术的核心价值在于将抽象的地理数据转化为直观的视觉表达,极大提升了用户体验与信息获取效率。从技术选型角度看,开发者需在免费简易的嵌入式方案与功能强大、按量计费的JavaScript API之间做出权衡,后者提供了对标记、信息窗口、地理编码等高级功能的完整控制权。在工程实践中,成本控制与API密钥安全配置

weixin_30357231的博客 435

AMap 高德地图的运用总结

记录高德地图的简单应用。包含 地图初始化,标记点位,添加点位图标,点位点击事件打开信息窗口 等等。ps:设置地图容器的宽高尺寸~

qq_35227244的博客 2286

微信小程序地图定位实战:权限策略、坐标系与逆地理编码全解析

微信小程序地图定位并非简单调用wx.getLocation API,而是涉及用户授权模型、GCJ02坐标系对齐、多地图服务商(高德/腾讯)逆地理编码、真机兼容性及心理化交互设计的系统工程。理解微信‘场景化授权’机制可显著提升用户授权率;统一采用gcj02坐标类型是避免地图偏移和跨平台错位的前提;高德/腾讯地图SDK集成需兼顾密钥安全、加载时序与降级容错;而address清洗、渐进式引导、失败状态人格化文案等实践,共同构成高可用定位体验的技术底座。本文聚焦生产级落地难点,覆盖从权限申请到地址呈现的完整链路。

weixin_34008933的博客 328

微信小程序原生定位三分钟实战:getLocation与reverseGeocoder详解

地理位置服务是小程序LBS功能的基础能力,其核心在于设备定位获取与坐标语义化转换。微信原生API通过wx.getLocation实现轻量、合规的GPS坐标采集,配合wx.reverseGeocoder完成逆地理编码,绕过第三方地图SDK的复杂配置,直接对接微信客户端底层定位模块。该方案支持GCJ-02火星坐标系,兼容高德/腾讯地图渲染,具备高成功率、低延迟、强隐私合规性等技术优势,广泛适用于附近门店查找、活动签到、位置上报等90%轻量级业务场景。本文聚焦wx.getLocation和wx.reverseGe

weixin_34242331的博客 326

Vue项目接入高德地图全指南:控件配置与常见坑位解析

在地理信息系统(GIS)与前端开发的交汇点,地图集成已经成为众多Web应用不可或缺的能力。高德地图作为国内主流的LBS服务提供商,其JS API为开发者提供了丰富的地图展示、交互与数据可视化功能。然而,从账号配置到实际部署,开发者常面临安全密钥校验、坐标系统差异、控件使用不当等系列问题。理解GCJ02与WGS84坐标系的转换原理,掌握ToolBar、Scale、Geolocation等控件的规范化配置方法,是保障地图功能稳定性的关键。在物流配送、轨迹回放、区域展示等场景中,合理运用Marker、Polygo

weixin_34210740的博客 416

百度地图Web端选点组件开发实战:从基础交互到性能优化

地图选点是Web应用中连接虚拟坐标与现实世界的关键交互功能,其核心原理在于将抽象的地理坐标选择转化为直观的图形化操作。通过调用地图服务API,开发者可以捕获用户的点击或拖拽事件,获取精确的经纬度坐标,并结合反向地理编码技术将其转换为可读的文本地址。这一技术对于提升用户体验、降低操作门槛具有重要价值,广泛应用于外卖配送、共享出行、房产标注、物流规划等需要精确定位的业务场景。本文以百度地图JavaScript API和Vue 3框架为例,深入探讨如何构建一个健壮、可扩展的地图选点组件,涵盖坐标处理、地址解析、性

weixin_30367873的博客 373

高德地图JS API 2.0核心功能与性能优化实践

Web地图开发是现代Web应用中的重要技术环节,其核心在于通过JavaScript API实现地理信息的可视化与交互。高德地图JS API 2.0基于WebGL渲染引擎,显著提升了地图渲染性能与功能扩展性。在技术原理上,它通过坐标系自动转换、双级地图加载策略等机制,确保数据准确性与加载效率。对于开发者而言,掌握海量点标记优化、动态轨迹可视化等高级功能,能够大幅提升物流追踪、门店管理等商业场景的应用体验。特别是在电商、智慧城市等领域,结合LabelMarker矢量标注方案与PathSimplifier插件,可

weixin_30924239的博客 360

WorkBuddy接入火山云Ark大模型:免费AI算力池实战指南

大型语言模型(LLM)通过标准化的API接口为开发者提供了强大的自然语言处理能力,其核心原理是基于海量数据训练的Transformer架构,能够理解和生成类人文本。这种技术价值在于极大地降低了AI应用开发门槛,使开发者可以快速集成智能对话、代码生成、文档分析等功能到现有工作流中。在实际应用场景中,开发者常面临模型选择、成本控制和数据隐私等挑战,而通过插件化架构接入第三方模型API成为主流解决方案。本文以WorkBuddy AI工作台为例,详细解析如何通过自定义Skill机制,安全高效地接入火山云Ark模型服

weixin_33754065的博客 413

基于uni-app的智慧零工平台前端开发:跨端实战与核心模块实现

跨端开发是当前移动应用开发领域的重要技术方向,它旨在通过一套代码实现在多个平台(如小程序、H5、App)的部署,从而大幅提升开发效率并降低维护成本。其核心原理通常基于统一的JavaScript框架(如Vue或React),通过编译时或运行时的适配层,将通用代码转换为各平台原生或接近原生的代码。这一技术为开发者带来了显著的价值,尤其适用于需要快速验证、覆盖多端用户且资源有限的场景,例如学生项目、创业公司MVP或中大型应用的跨平台模块。在实际应用中,跨端技术常被用于构建电商、社交、工具及O2O类应用。本文以智慧

aoe41606的博客 437

从零构建校园导览APP:Android+Spring Boot整合地图定位与路线规划

移动应用开发中,地图服务与定位技术是构建LBS(基于位置服务)应用的核心基础。其原理是通过GPS、网络或基站定位获取设备经纬度坐标,并利用地图SDK进行可视化渲染。这项技术的价值在于将物理空间数字化,为用户提供实时位置感知和空间导航能力,广泛应用于出行、物流、社交和本地生活服务等场景。在校园导览这类典型应用中,开发者需要将客户端地图展示、实时定位与服务端的兴趣点管理、路径规划算法进行有机整合,实现前后端数据的高效交互。本文以Android客户端集成高德地图SDK和Spring Boot服务端开发为例,详细解

diaoju3333的博客 416

即插即用!5分钟为你的SNN模型添加频谱注意力(DCT-SA模块实战)

本文介绍了如何为脉冲神经网络(SNN)快速集成即插即用的DCT-SA频谱注意力模块。该模块利用离散余弦变换(DCT)在频率域自适应加权特征,能有效提升模型对纹理、边缘的感知能力,并在CIFAR10-DVS等数据集上实现分类精度提升与脉冲发放率下降。文章以SpikingJelly框架和ResNet19为例,提供了详细的代码实现、集成步骤及参数调优实战指南。

kotlin6android的博客 609

Folium地图可视化实战:从数据到交互式地理看板

地理信息系统(GIS)可视化是空间数据分析的关键环节,而Folium作为基于Leaflet的Python轻量级地图库,以‘零前端门槛、直连pandas、开箱即用’为核心优势,成为数据工程师与BI分析师快速构建交互式地理看板的首选工具。其底层依托WGS84坐标系与JavaScript渲染引擎,规避了复杂投影转换与GIS专业依赖;通过Marker、HeatMap、Choropleth等封装组件,可将CSV/Excel/GeoDataFrame一键映射为可缩放、可聚类、可时间动态着色的地图。在物流调度、区域业绩分

weixin_34099526的博客 381

pytorch中的wheel文件

whl 文件是 Python 的一个软件包分发格式,用于在 Python 中安装软件包。它是 Python Wheel 的缩写,也被称为 wheel 文件。这种文件格式旨在简化 Python 软件包的安装和分发。对于 PyTorch 而言,它提供了预编译的 .whl 文件,您可以通过 pip 安装这些文件来快速方便地安装 PyTorch。这些 .whl 文件是已经编译好的二进制分发文件,可以直接安装在您的 Python 环境中,而无需再进行编译。

bj_zhb的博客 3126

STM32CubeMX和华为LiteOS Studio开发STM32

传统的STM32的开发通常使用Keil/IAR这类开发软件,随着物联网时代的到来,传统嵌入式的发展不断向物联网方向靠拢,而Keil/IAR这类开发软件无法满足IoT一站式的开发,华为LiteOS Studio结合STM32CubeMX可以快速,高效地进行物联网开发,本文提供一种开发思路及环境的配置方法。...

weixin_45680600的博客 2833
上一篇: 前端面试题之typeof返回类型与值
下一篇: 使用JS制作一个鼠标可拖的DIV
Jet_closer
博客等级 码龄7年 568粉丝 83原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jet_closer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值