This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Dynamic effect of Marker on Baidu map — external event control

Last article wrote the batch rendering of marker markers on Baidu map. Now let’s talk about how to operate the modification icon of Marker on Baidu map through external events and add dynamic effects to one of multiple marker points, as shown in the figure

1. Create a Map instance

var bmap = new BMapGL.Map("allmap"); Bmap. CenterAndZoom (new BMapGL. Point (105.672462, 35.512837), value); / / initializes the map, set the center coordinates and map level (default setting) bmap. EnableScrollWheelZoom (true); For (var I = 0; i < projectList.length; I++) {let myIcon = new bmapgl. Icon(dw2, new bmapgl. Size(30,30)); var point = new BMapGL.Point(110, 12); var marker = new BMapGL.Marker(point,{ icon: myIcon }) var label = new BMapGL.Label(html, { offset: new BMapGL.Size(13, -13) }); SetStyle ({display: "none", color: "# FFF ", fontSize: "12px", fontFamily: "Microsoft ya-hei ", backgroundColor: "RGB (11,34,44)", padding: "5px 10px", borderWidth: 1, borderColor:" RGB (11,34,44), borderRadius: "6px", borderLeft:'none', zIndex:'-5', textOverflow:'ellipsis', overflow:'hidden', whiteSpace:'nowrap', maxWidth:'250px', }); marker.setLabel(label); marker.customData = { 'data': This.markerlist.push (marker) bmap.addoverlay (marker); this.markerList.push(marker) bmap. } map.setmapType (BMAP_EARTH_MAP); // This is the important step to add instance objects to data. This.map = bmapCopy the code

2. External events to manipulate

Let’s first briefly talk about the specific implementation and operation logic. Since marker and map were added to data in the above example map, we can directly use the data and attributes in map, so we can use setIcon() method to get the icon of the current coordinate. You can then perform operations and modifications as follows

Modify the icon

Let icon = new bmapgl. icon (mapGif, new bmapgl. Size(30,60)); that.markerList[index].setIcon(icon);Copy the code

Modify the div of the label to add dynamic effects, as shown in figure we find the map rendering box class name to do the operation

Then it can be seen from the list data of marker that we have obtained that is the className of the marker point that can be obtained

And then we can add a class dynamic style to this box, and we can add dynamic effects to this box, so

That. MarkerList [index]. DomElement accordingly. The className = item. The domElement accordingly. The className + 'mapBG' / / directly adding a mapBG dynamic style. The mapBG { height:30px; width:30px; border-radius: 25px; background: rgba(250, 0, 0); transform: scale(0); animation: myfirst 2s; animation-iteration-count: infinite; } @keyframes myfirst{ to{ transform: scale(2); background: rgba(0, 0, 0, 0); }}Copy the code

As you can see, you have successfully added this class, and you can also add dynamic effects to a annotation point

Modify the style of the label

var label = that.markerList[index].getLabel()
label.setStyle({ display: "block", whiteSpace:"normal",width:'250px'});
Copy the code

That’s the basic gist. Here’s a full code example

getProjectId(i){ let that = this this.projectStatus = i.sectionId this.mapInput = i.sectionName console.log(that.map); ForEach ((item,index) =>{let markerList = that. MarkerList markerList. ForEach ((item,index) =>{// This if judgment is to find the icon if of the marker marker corresponding in the marker that I want to modify (i. ectionId = = = item. CustomData. Data, sectionId) {/ / let icon = new BMapGL. Icon (mapGif, new BMapGL Size (30, 60)); var label = that.markerList[index].getLabel() // that.markerList[index].setIcon(icon); label.setStyle({ display: "block", whiteSpace:"normal",width:'250px'}); That. MarkerList [index]. DomElement accordingly. The className = item. The domElement accordingly. The className + 'mapBG'} else {/ / this is for other icon is constant or variable back let MyIcon = new bmapgl. Icon(dw2, new bmapgl. Size(30,30)); that.markerList[index].setIcon(myIcon); let className = item.domElement.className if (className.indexOf("mapBG") ! = -1) { className = className.replace('mapBG', '') that.markerList[index].domElement.className = className } else { that.markerList[index].domElement.className = className } }) this.$nextTick(()=>{ setTimeout(function(){ that.map.centerAndZoom(new BMapGL.Point(i.gpsX, i.gpsY), 13);  // that.map.addOverlay(that.markerList) },20); })},Copy the code