效果图

实现代码

var map,markerList;// 获取事件数据
getEvent(){// ... 省略无关代码var  self = this;mapMarks.forEach(function(item){self.createMineMark(item);})// ... 省略无关代码
},
// 给地图添加点和监听事件
createMineMark(record){var self = this;// 设置不同类型的图标if(record.jqlx == '01'){icon = '<i class="map-icon itsIcons"><svg width="1em" height="1em" fill="currentColor" viewBox="0 0 57.2 51">...</svg></i>';} else if(record.jqlx == '02'){icon = '<i class="map-icon itsIcons"></i>';} else if(record.jqlx == '03'){icon = '<i class="map-icon itsIcons"></i>';} else if(record.jqlx == '04'){icon = '<i class="map-icon itsIcons"></i>';} else if(record.jqlx == '05'){icon = '<i class="map-icon itsIcons"></i>';} else if(record.jqlx == '06'){icon = '<i class="map-icon itsIcons"></i>';} else if(record.jqlx == '07'){icon = '<i class="map-icon itsIcons"></i>';}//创建点var el = document.createElement('div');el.className = 'event-point';el.id = 'marker' + record.jqbh;el.style.width = "28px";el.style.height = "28px";el.style.position = "absolute";el.innerHTML  = icon;var marker = new minemap.Marker(el, {offset: [-14, -14]}).setLngLat([record.jd, record.wd]).addTo(map);markerList.push(marker); // 加入数组，方便后面操作maker// 监听点击$(el).on('click', function(e){e.stopPropagation();$('.minemap-marker').removeClass('marker-active');})},

mineData地图添加自定义Maker图标相关推荐

Flutter 高德地图应用之一：将widget 转换成高德地图的maker 图标
按:笔者刚刚开始学习flutter,起因是想做一个跨平台的地图应用,因此就开始学习flutter 和高德地图的结合应用. 本方法受到Google MarkIcon 代码的启发而成,大致思路是将widg ...
高德地图添加自定义图标
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 1.问题 ...
百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果上次写的是添加自 ...
百度地图添加自定义Marker+显示覆盖层次优先级
转载请注明出处:blog.csdn.net/wll995806658 实际项目中经常会集成地图,今天就只谈谈百度地图添加自定义Marker这一部分,希望对百度地图集成有这部分需求的小伙伴能有一些帮助. ...
map-box地图点击图标高亮事件
npm install --save mapbox-gl <template><div id="map-box"></div> </tem ...
百度地图动态修改图标
百度地图API真的是无力吐槽. 最近做一个页面推送功能,需要实时修改百度地图覆盖物的图标,研究了一下午,总算出来了.其实也不难,利用提供的setIcon()方法可以对图标进行动态更新. //覆盖物扫描 ...
Echarts自定义地图和添加图标
介绍:由于我司在项目中使用到了Echarts,所以我开了Echarts的相关栏目来分享在使用上的经验.这是本栏目的第一篇文章,需要Echarts相关基础,之后会介绍Echarts的基础,需要的朋友可以 ...
百度地图开发自定义图标无法显示的问题
直接上解决方案引入图标需要使用require关键字,不能只写资源路径: 你的图标的大小必须与百度地图设置的图标size一致,比如下图在icon font中下载了一个图标(200 * 200),在引入 ...
百度地图解决自定义图标显示问题
百度地图解决自定义图标太大不显示问题这几天碰到这个需求, 需要在百度地图上显示头像,因为图片太大一直没有显示,百度了几天,解决都长一样,心累. 提供以下几种解决思路: 检查图片路径是否错误图标大小 ...
openlayers 地图上加图标_Openlayers 定位，添加自定义图标，点击图标弹框
之前已经把地图展示出来,现在可以在地图上做相关操作. 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as Ve ...

mineData地图添加自定义Maker图标

效果图

实现代码

mineData地图添加自定义Maker图标相关推荐

最新文章

热门文章