CSS 实现地图点位Marker

对我来说写静态页面是相对于逻辑比较弱一点的，分析来说还是平时写的不够多，毕竟CSS 是练出来的。

不是特别复杂的内容，只是自己这方便比较薄弱，简单记录一下，保存一个demo。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style='position:relative;width: 22px;height: 40px;'><div style='position:absolute;width:25px;height:25px;;top:2px;left:0px;background: #0E3169;color:#fff;line-height:26px; text-align: center;border-radius: 40px;'></div><div style='position: absolute;height: 0px;width: 0px;bottom: 4px;left: 2px;border: 10px transparent solid;border-top-color: #0E3169;border-width: 14px 10px 0px 10px;'></div><img style='width:15px;height:15px;position:absolute;top: 5px;left: 52%; transform: translateX(-50%);' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftta.cn%2Ftbimg%2Fimg%2Fimgextra%2Fi3%2F2469027882%2FTB2.mpFXabyQeBjy1XbXXa9yXXa_%21%212469027882.gif&refer=http%3A%2F%2Ftta.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647593134&t=9cfe9b7c7f259fab842710e23193b06a'><div style='position:absolute; left: 10px; top:6px;font-size:11px;color: #fff; background: #0E3169;padding:2px 5px 2px 14px;z-index: -50;white-space:nowrap;border-top-right-radius: 10px;border-bottom-right-radius: 10px;'>这个地方打架斗殴了</div></div>
</body>
</html>

效果如下图所示：右侧的效果是因为项目需求简单补上的。

立个FLAG ，这个周末找机会练习一些css 尤其是动画相关的。

CSS 实现地图点位Marker相关推荐

教你如何利用微信小程序高效地完成地图点位标注
前言如今,移动互联网技术飞速发展,微信小程序以其方便快捷的特点受到了广泛的欢迎.在这篇文章中,我将会介绍如何利用微信小程序实现地图点位功能,帮助大家更好地了解和使用地图服务.让我们一起来看看吧. 实 ...
vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
geoserver css插件,GeoServer使用CSS定义地图样式-上手
使用CSS进行地图配色,能够实现与SLD语言相通的效果,具体样式定义规则参考CSS语法,是在花括号内的键值对来实现{ name: value },支持CSS嵌套,内层级别高于外层. 在新建CSS样式的 ...
CSS 与地图可视化三棱锥（九）
地图可视化来到Css 篇章了,这次一口气是兼容了7个地图引擎, 这次直接上包应用类库兼容地图引擎有 mapbox maptalks arcgis 4 leaflet openlayer 高德地图百 ...
百度地图添加自定义Marker+显示覆盖层次优先级
转载请注明出处:blog.csdn.net/wll995806658 实际项目中经常会集成地图,今天就只谈谈百度地图添加自定义Marker这一部分,希望对百度地图集成有这部分需求的小伙伴能有一些帮助. ...
CSS 与地图可视化模糊注记（十七）
地图可视化来到Css 篇章了,这次一口气是兼容了7个地图引擎, 这次直接上包应用类库兼容地图引擎有 mapbox maptalks arcgis 4 leaflet openlayer 高德地图百 ...
高德地图聚合android,GitHub - lingyanluoxue/android-togetherMap: 实现高德地图的marker聚合功能...
android-togetherMap 本文我将讲解一下我最近实现的高德地图Marker的聚合功能.在项目开发中需要使用到地图Marker的聚合功能,但是高德地图并没有实现对Marker的聚合功能,所 ...
高德地图自定义marker+信息窗口
先上效果图首先在index.html引入高德地图,你的key.其中plugin后面拼接是是所依赖的插件.版本不同,有些写发也不同,望注意:这里我使用2.0版本. <script src=&qu ...
高德地图自定义Marker
1.添加Marker 的方法 // 添加多边形的边界点markerprivate void addPolygonMarker(LatLng latlng) { // markerOption.posi ...
添加arcgi移动地图点位事件
//地图 var map = null; //arcgis 中的实例化对象 var Map = null; //地图 var Point = null; //点 var SpatialReferenc ...

CSS 实现地图点位Marker

CSS 实现地图点位Marker相关推荐

最新文章

热门文章