This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Write in front:

  • This article as my study summary of the use, at the same time to share with you ~
  • Personal front-end blog site: zhangqiang.hk. Cn
  • Welcome to join the front-end learning QQ communication group of the blogger: : 706947563, focus on the front-end development, learning and progress together!
  • Github source code address: Github.com/front-end-s…

This chapter mainly introduces and realizes the following contents:

  • Draw desired points on the map, including custom ICONS for custom points
  • Draw polylines on the map
  • Draw faces (circles, polygons, rectangles) on the map

Add these points, lines and planes to the layer using the map.addoverLay method.

mulch The name of the class instructions
Abstract base class Overlay All coverings inherit methods of this class
point Marker It represents a point on a map and can be customized
Broken line Polyline Represents a polyline on a map
polygon Polygon Represents a polygon on a map
round Circle Represents a circle on a map

1 Draw the desired points on the map, including custom ICONS for custom points

Mainly using the Marker class

  • Common point
Var point = new bmapgl. point (116.404, 39.915); var marker = new BMapGL.Marker(point); // Create marker map.addoverlay (Marker); // Add the annotation to the mapCopy the code
  • Dot with custom icon
Var myIcon = new bmapgl. Icon("markers. PNG ", new bmapgl. Size(23, 25), {// Specify the location. // When the annotation is displayed on the map, the geographic location it points to is offset by 10 pixels and 25 pixels from the upper left corner of the icon. You can see that in this case this is the sharp corner at the bottom of the center of the // icon. Anchor: New bmapgl.size (10, 25), // Set the image offset. // When you want to capture a part of a larger image as a label icon, you need to specify the offset of the larger image, similar to the CSS Sprites technique. ImageOffset: new bmapgl. Size(0, 0-25) // set imageOffset}); Var marker = new bmapgl. marker (point, {icon: myIcon}); var marker = new bmapgl. marker (point, {icon: myIcon}); map.addOverlay(marker);Copy the code
  • You can also add listening events to the dot
Marker. AddEventListener ("click", function(){alert(" you clicked on the marker "); });Copy the code

2 Draw a polyline on the map

The main implementation is using the Polyline class.

Var polyline = new bmapgl. polyline ([new bmapgl. Point(116.399, 39.910), new bmapgl. Point(116.405, 39.920), new bmapgl. Point(116.405, 39.920), New bmapgl. Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polyline);Copy the code

3. Draw faces (circles, polygons, rectangles) on the map

  • round
= new bmapgl. circle (point,500,{strokeColor:"blue", strokeWeight:2, strokeWeight: 0.5}); // Create a circle map.addoverlay (circle);Copy the code
  • polygon
Var polygon = new bmapgl. polygon ([new bmapgl. Point(116.387112,39.920977), new bmapgl. Point(116.385243,39.913063), new bmapgl. Point(116.385243,39.913063), New BMapGL. Point (116.394226, 39.917988), the new BMapGL. Point (116.401772, 39.921364), New bmapgl. Point(116.41248,39.927893)], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polygon);Copy the code
  • rectangular
Var pStart = new bmapgl. Point(116.392214,39.918985); Var pEnd = new bmapgl. Point(116.41478,39.911901); var rectangle = new BMapGL.Polygon([ new BMapGL.Point(pStart.lng,pStart.lat), new BMapGL.Point(pEnd.lng,pStart.lat), new BMapGL.Point(pEnd.lng,pEnd.lat), new BMapGL.Point(pStart.lng,pEnd.lat) ], {strokeColor:"blue", strokeWeight:2, StrokeOpacity: 0.5}); // Create rectangle map.addOverlay(Rectangle); // Add the rectangleCopy the code

Four eggs

  • The magic ofconsolestatements
Console. info("%c magic console statement ", "color: #3190e8; font-size: 30px; font-family: sans-serif");Copy the code

This paper reference links: lbsyun.baidu.com/index.php?t…

Thanks for seeing the end! Code word is not easy, like is the biggest support oh!