高德地图开发实战案例:实现信息弹出框的富文本展示效果

javascript 复制代码
marker.content = "<p class='cardsBg'></p>";
css 复制代码
.cardsBg {
    width: 246px;
    height: 426px;
    background: url(../images/cards.png) no-repeat center center;
}

其中cards.png为整个弹出模态框的背景图片,做到这一步。仍旧会自带高德地图的样式,需要增加一个强制CSS样式表内容,来覆盖掉高德自带的样式。

css 复制代码
/*高德地图弹出框*/
.amap-info-content {
    background: transparent !important;
}

lockdatav Done !

相关推荐
咖啡の猫2 分钟前
Vue解决开发环境 Ajax 跨域问题
前端·vue.js·ajax
盼哥PyAI实验室7 分钟前
纯前端打造个人成长网站:零后端、零部署、零服务器的实践分享
运维·服务器·前端·javascript·echarts·个人开发
nppe68 分钟前
NestJs 从入门到实战项目笔记
前端·后端
景彡先生16 分钟前
Python Flask详解:从入门到实战,轻量级Web框架的魅力
前端·python·flask
qq_4203620318 分钟前
AI在前端工作中的应用
前端·人工智能·sse
Lsx_20 分钟前
详解ECharts中的convertToPixel和convertFromPixel
前端·javascript·echarts
吃饺子不吃馅29 分钟前
Web端PPT应用画布方案:Canvas 还是 DOM?
前端·架构·canvas
晴殇i37 分钟前
Web端PDF预览方法详解
前端·javascript·vue.js
加油乐1 小时前
解决 iOS 端输入框聚焦时页面上移问题
前端·javascript·ios
鹏多多1 小时前
纯前端提取图片颜色插件Color-Thief教学+实战完整指南
前端·javascript·vue.js