高德地图上绘制城市名字和带涟漪的点标记

接上一篇"vue中基于echarts和基于高德地图的两种地图下钻与上浮方式"

  import noEmerIcon from "./img/emerManagement/noEmerIcon.png";import emerIcon from "./img/emerManagement/emerIcon.png";import noEmerIcon7 from "./img/emerManagement/icon7.png";import noEmerIcon10 from "./img/emerManagement/icon10.png";
.......
.......
data(){return{/******************地图******************/map:null,//高德地图实例sectionMarker:null,//点标记sectionTextMarker:null,//文字标记sectionMarker_data:[],//存放图标点标记sectionTextMarker_data:[],//存放省市名字点标记sectionText:null,//点标记上的内层涟漪sectionText2:null,//点标记上的外层涟漪dataPosition:'',//坐标adcode:'',//城市区码sectionIcon:'',//点标记样式sectionBorder:'',//点标记涟漪icon:{//点标记样式noEmerIcon:new AMap.Icon({image: noEmerIcon,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),noEmerIcon7:new AMap.Icon({image: noEmerIcon7,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),noEmerIcon10:new AMap.Icon({image: noEmerIcon10,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),emerIcon:new AMap.Icon({image: emerIcon,imageSize: $(window).width()>=1600?new AMap.Size(15,15):new AMap.Size(10,10),offset: new AMap.Pixel(0, 0)}),},border:{//点标记涟漪noEmerBorder:'5px solid green',noEmerIcon7:'5px solid orange',noEmerIcon10:'5px solid red',emerIcon:'5px solid red'},}
},/**********************************获取并绘制城市文字标记****************************************/getCityName(adcode) {if (adcode == undefined || adcode == null || adcode == "") {adcode = "";}this.removeAreaText();//清空文字点标记this.sectionTextMarker = null;后台接口([{citiesNo: adcode//城市编码}]).then(data => {for (var i = 0; i < data.result.length; i++) {this.sectionTextMarker = new AMap.Marker({content: "<h1 class = 'font2'>" + data.result[i].cities_name + " </h1> ",position: [data.result[i].lot, data.result[i].lat],offset: new AMap.Pixel(0, 0)});this.sectionTextMarker_data.push(this.sectionTextMarker);}this.map.add(this.sectionTextMarker_data);});},// *****获取项目工程数据******/getScreenSectionPoint(cityAdcode) {this.removeMarker();后台接口([{cities_no:cityAdcode}]).then(data =>{if(data.statusCode == 200){if(data.result.length>0){for(let i=0;i<data.result.length;i++){this.getSectionIcon(data.result[i])let sectionArray={value:[data.result[i].lng,data.result[i].lat],type:data.result[i].type,//类型--用于判断点标记样式}this.addPositiion(sectionArray)}this.map.add(this.sectionMarker_data);}}else{this.$message({type:'error',message:data.message})}}).catch(()=>{})},/**************************动态添加点标记****************************************/addPositiion(data) { //添加点标记this.sectionText = new AMap.Text({offset: new AMap.Pixel(-1, -23),position: data.value,text: " ",style: {"background": "none","width": "35px","height": "35px","border-radius": "100%","border":this.sectionBorder,"animation": "myfirst 1.4s infinite"}});this.sectionText2 = new AMap.Text({offset: new AMap.Pixel(-1, -23),position: data.value,text: " ",style: {"background": "none","width": "45px","height": "45px","border-radius": "100%","border": this.sectionBorder,"animation": "myfirst 1.6s infinite"}});var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0,-30),/* isCustom:true,//信息窗体外框及内容完全按照content所设的值添加*//* anchor:'bottom-right',//信息窗体锚点*/})this.sectionMarker = new AMap.Marker({position: data.value,icon:this.sectionIcon});if(data.type==0||data.type==2||data.type==3){//无预警this.sectionMarker.content = '<div class="mapBox"><div class="amap-info-content">'+'<div class="emerScreen_sectionTooltip_boxNo">'+'<i></i>'+'<i></i>'+'<i></i>'+'<i></i>'+'<span class="tooltip_spanNo" >项目工程：'+data.section_name+'</span>'+'<span class="tooltip_spanNo">应急总次数：'+data.countId+'</span>'+'<span class="tooltip_spanNo">应急总时长：'+data.times+'</span>'+'</div>'+'</div></div>'}else{//有预警this.sectionMarker.content = '<div class="mapBox"><div class="amap-info-content">' +'<div class="emerScreen_sectionTooltip_box">'+'<p><i></i>'+'<span>'+data.warnType+'</span>'+'<span>'+data.warnLevel+'</span>'+'</p>'+'<p >项目工程：'+data.section_name+'</p>'+'</div>'+'</div></div>'}/* marker.setAnimation('AMAP_ANIMATION_DROP');*/this.sectionMarker.on("mouseover", infoOpen);//注释后打开地图时默认关闭信息窗体this.sectionMarker.on("mouseout", infoClose);this.sectionMarker.on("click", newMAp);//鼠标点击事件,设置地图中心点及放大显示级别var that=thisfunction newMAp(e) {that.map.setZoomAndCenter(10, e.target.getPosition());var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });infoWindow.open(that.map, e.target.getPosition());setTimeout(() => {that.$router.push({name:'fieldScreen',params:{section_id:data.section_id,lablename:data.section_name}})}, 500);}function infoClose(e) {infoWindow.close(that.map, e.target.getPosition());}function infoOpen(e) {console.log(e.target.content)infoWindow.setContent(e.target.content);// setTimeout(function() {//   setTimeout(function() {//     $(".amap-info-content .thelook").fadeIn("slow");//   }, 1200);// }, 200);infoWindow.open(that.map, e.target.getPosition());}this.sectionMarker_data.push(this.sectionText);this.sectionMarker_data.push(this.sectionText2);this.sectionMarker_data.push(this.sectionMarker);//最后添加marker,防止textMarker将marker遮盖无法鼠标悬浮信息窗体},/*******************************点标记样式*****************************************///可根据自己需求进行点标记样式判断getSectionIcon(data){if (data.type==0) {//无预警且无台风this.sectionIcon =new AMap.Icon({image: noEmerIcon,imageSize: new AMap.Size(15, 15),offset: new AMap.Pixel(0, 0)});this.sectionBorder='5px solid green';} else if (data.type == 1) {//有预警this.sectionIcon = new AMap.Icon({image: emerIcon,imageSize: new AMap.Size(15, 15),offset: new AMap.Pixel(0, 0)});this.sectionBorder='5px solid #FF9F7F';} else if (data.type == 2) {//无预警但受10级台风风圈影响this.sectionIcon = new AMap.Icon({image: noEmerIcon10,imageSize: new AMap.Size(15, 15),offset: new AMap.Pixel(0, 0)});this.sectionBorder='5px solid #EBDC3C';} else if (data.type == 3) {//无预警但受7级台风风圈影响this.sectionIcon = new AMap.Icon({ image: noEmerIcon7,imageSize: new AMap.Size(15, 15),offset: new AMap.Pixel(0, 0)});this.sectionBorder='5px solid #78C51A';}},/************************************清除点标记*************************************************///清空点标记removeMarker() {    this.map.remove(this.sectionMarker_data);this.sectionMarker_data = [];},//清空省市文字点坐标removeAreaText() {this.map.remove(this.sectionTextMarker_data);this.sectionTextMarker_data = [];},/*************************************清除点标记*****************************************/

<style lang="scss">
/**********地图点标记特效*********/@keyframes myfirst {0% {-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);opacity: 1}100% {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);opacity: 0}}/***********地图悬浮窗样式***********/.font2 {font-size: 6px;color: white;width: 80px;}.amap-info-content {background: none;color: white;border: none;padding: 0;box-shadow: none;position: relative;/*left: 5px;top:15px;*/}.mapBox .amap-info-content:hover {background: none;color: white;border: none;padding: 0;box-shadow: none;position: relative;/* left: 0px;top: 12px;*/}.amap-info-sharp {background: none;}.mapBox .amap-info-content {.emerScreen_sectionTooltip_boxNo {background:rgba(2,19,37,0.8);padding:10px;i{display:inline-block;height:20px;width:20px;position:absolute;&:nth-child(1){border-top:2px solid rgba(0,255,255,1);border-left:2px solid rgba(0,255,255,1);left:0px;top:0px;}&:nth-child(2){border-bottom:2px solid rgba(0,255,255,1);border-left:2px solid rgba(0,255,255,1);left:0px;bottom:0px;}&:nth-child(3){border-top:2px solid rgba(0,255,255,1);border-right:2px solid rgba(0,255,255,1);right:0px;top:0px;}&:nth-child(4){border-bottom:2px solid rgba(0,255,255,1);border-right:2px solid rgba(0,255,255,1);right:0px;bottom:0px;}}.tooltip_spanNo{display:block;line-height:32px;font-size:14px;color:#fff;}}.emerScreen_sectionTooltip_box{background:rgba(2,19,37,0.8);border:2px solid rgba(0,255,255,1);display:flex;text-align: center;p{&:nth-child(1){width:30%; display:inline-block;background:red;padding:5px 0px;i{display: inline-block;height:20px;width: 20px;border:4px solid #fff;border-radius: 50%;}span{display:block;color:#fff;font-size:14px;line-height:16px;}}&:nth-child(2){display:inline-block;color:#fff;font-size:14px;line-height:32px;}}}}.amap-info-close {display: none;}
</style>

图片

高德地图上绘制城市名字和带涟漪的点标记相关推荐

react高德地图定位--显示城市名字
react函数组件高德地图定位–显示城市名字一.注册账号并申请Key 1.首先,注册开发者账号,成为高德开放平台开发者 2. 登陆之后,在进入「应用管理」页面「创建新应用」 3. 为应用添加 Ke ...
vue使用高德地图并且绘制多边形
使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件,如果直接new出该工具会提示该工具不是一个函数之类的错误,在使用之前需要先告诉vue,你所是使用的是一个插件 AMap.plugin([&quo ...
Python爬虫高德地图全国各个城市POI并导出表格（PyCharm ）结尾含源码地址
声明:本文仅做技术交流,请勿用于商业用途! 可爬取高德地图上各个城市公司.餐饮.医院.商家等信息并导出Excel,效果如图 1.前期准备 1.1 下载安装python并配置环境这里推荐篇博客很详细: ...
地图上分成一块一块区域高德地图_在谷歌地图上绘制行政区域轮廓【结合高德地图的API】...
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...
android地图画线,绘制折线-在地图上绘制-开发指南-Android 轻量版地图SDK | 高德地图API...
地图上绘制的线是由 Polyline 类定义实现的,线由一组经纬度(LatLng对象)点连接而成. 绘制一条线与点标记一样,Polyine的属性操作集中在PolylineOptions类中,添加一条 ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...
高德地图某一城市地铁路线高亮解决方案
高德地图某一城市地铁路线高亮解决方案项目刚好有一个需求,在地图上按需高亮全部或者某一条地铁线路.找了蛮久没找到什么好的解决方案(也可能是自己菜),那就只能自己投机取巧咯.不多说上代码. <!- ...
如何在谷歌地图上绘制矢量道路线并导出为图片
概述水经注软件除了可以对百度坐标与火星坐标进行纠偏,下载陆地及海洋高程.提取10米等高线等深线.CASS高程点,下载含高度的全国矢量建筑.全国乡镇及街区行政区划.地名点.高速铁路网.公交路线.水系. ...
高德地图上展示终端信息
本人参与的一个智慧园区的项目,网络地图开发出来的后期效果如下图所示: 初次拿到设计图时还没有左上角的全局搜索框,第一步首先是绘制出浮在上层的四张卡片,我是用遍历的方式依次渲染的: {showCards ...

高德地图上绘制城市名字和带涟漪的点标记

高德地图上绘制城市名字和带涟漪的点标记相关推荐

最新文章

热门文章