This is the 9th day of my participation in Gwen Challenge. See more details: Gwen Challenge!

Introduction to 馃懡

Yesterday, I shared with you the development of Baidu map heat map and the realization of regional boundaries. Today, I will strike while the iron is hot, and then share with you the method of custom marking on the map, and the renderings after the completion of the first.

馃懟 Development Preparation

The development preparation is basically the same as before, except that the thermal map library and data that are not used for the time being are removed.

<! DOCTYPEhtml>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Baidu Thermal Map</title>
    <style>
      html.body {
        height: 100%;
        padding: 0;
      }
      #map {
        height: 1200px;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
  </body>
  

  <! -- Baidu Map API -->
  <script
    type="text/javascript"
    src="http://api.map.baidu.com/api?v=3.0&ak=xxxxxxxxx"
  ></script>

  <! Block boundary data -->
  <script type="text/javascript" src="./data/features.js"></script>
  <! -- Logic JS -->
  <script type="text/javascript" src="index.js"></script>
</html>
Copy the code

馃懡 Initialize the Baidu map

There is no more to say about this part. If you have doubts, please refer to the article mentioned in my introduction.

馃懡 Implementation of custom annotations

The custom annotation here has two meanings: one is to realize the annotation at any position; Second, customize the style of annotation. There are many types of annotations on Baidu Map, but they all work the same. We choose the Label type to achieve this (mainly because this type can add text content, and other types of annotations can be used if not needed).

Let’s use an example to do this simultaneously.

function initMap(domID, centerPoint, styleId) {
  let mapInstance = new BMap.Map(domID); // Create a map instance

  mapInstance.centerAndZoom(centerPoint, 13); // Set the center point and zoom level

  mapInstance.setMapStyleV2({ styleId }); // Set the style ID

  mapInstance.enableScrollWheelZoom();
  mapInstance.enableDragging();
  mapInstance.disableDoubleClickZoom();

  return mapInstance;
}

function generateDistrictBoundary(mapInstance, districtName, style) {
  let bdary = new BMap.Boundary();
  bdary.get(districtName, function (res) {
    let boundaries = res.boundaries;

    let points = [];
    // The loop is used because there are enclaves in some administrative districts, which can be divided into multiple sections, so it needs to be traversed
    boundaries.forEach(boundary= > {
      let polygon = generateBoundary(mapInstance, boundary, style);

      let path = polygon.getPath();
      points = points.concat(path);
    });
  });
}

function generateBoundary(mapInstance, points, style) {
  let polygon = new BMap.Polygon(points, style); // Create a polygon

  // Add overlay
  mapInstance.addOverlay(polygon); // Add polygons

  return polygon;
}

const iconList = [
  'url(./icon/ pentagram. PNG)'.'url(./icon/ square.png)'.'url (.. / icon/round. PNG)'.'url(./icon/ triangula.png)'.'url(./icon/ hexagon. PNG)'.'url(./icon/ pentagon.png)',];function generateLabel(point) {
  /** The first step defines the label entity */
  const label = new BMap.Label();

  /** Step 2 define the style and position of the label */
  label.setPosition(point.position); // Define the coordinates of the label
  // It is worth noting that position should be an instance of The Baidu Point class, not the longitude and latitude values
  label.setContent(point.content); // Sets the text content of the label

  // Custom label styles (there is a lot of room for almost all CSS attributes to be used here
  // Just be sure to replace the original hyphenated attribute name with a small hump
  label.setStyle({
    width: '8px'.height: '8px'.lineHeight: '8px'.textAlign: 'center'.backgroundImage: iconList[point.type], // The most important is the background image property, which allows us to implement any style
    backgroundSize: 'contain'.backgroundPosition: 'center center'.backgroundRepeat: 'no-repeat'.backgroundColor: 'transparent'.color: '# 000'.borderColor: 'transparent'});/** Step 3 add the label entity to the graph */
  mapInstance.addOverlay(label);
}

window.onload = function () {
  let centerPoint = new BMap.Point(104.084207.30.695243);
  let styleId = '02f2d7d1f52e7261479d4a9755a8485e';

  let mapInstance = initMap('map', centerPoint, styleId);

  let style = {
    strokeWeight: 3.strokeColor: '#2c2a2a'.strokeStyle: 'dashed'.fillColor: '#fff'}; generateDistrictBoundary(mapInstance,'Jinniu District', style);


  /** data * data = [* 路路路 * {posotion: new map.point (104.068551, 30.723895), Type :1, Content :1,} * 路路路 *] */

  data.forEach(point= > generateLabel(point));
};

Copy the code

The final effect is as follows:

馃懡 epilogue

There is one, Baidu map map or very good to use. Let’s try it.