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

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 !

相关推荐
yuanyxh1 小时前
《精通正则表达式》精华摘要
前端·javascript·正则表达式
小飞大王6662 小时前
简单实现HTML在线编辑器
前端·编辑器·html
Jimmy2 小时前
CSS 实现卡牌翻转
前端·css·html
百万蹄蹄向前冲2 小时前
大学期末考,AI定制个性化考试体验
前端·人工智能·面试
向明天乄3 小时前
在 Vue 3 项目中集成高德地图(附 Key 与安全密钥申请全流程)
前端·vue.js·安全
sunshine_程序媛3 小时前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
电商数据girl3 小时前
【经验分享】浅谈京东商品SKU接口的技术实现原理
java·开发语言·前端·数据库·经验分享·eclipse·json
Senar4 小时前
听《富婆KTV》让我学到个新的API
前端·javascript·浏览器
烛阴4 小时前
提升Web爬虫效率的秘密武器:Puppeteer选择器全攻略
前端·javascript·爬虫
hao_wujing4 小时前
Web 连接和跟踪
服务器·前端·javascript