“This is the 22nd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

  1. Map JS size is around 337K (it must be loaded, but not necessarily first)
  2. Autonavi map is drawn on canvas (you can right-click to check elements and find canvas elements)

We discuss the best practices of Amap from the following aspects:

  • Map JS source code how to load
  • How to manage map layers
  • Set up a proper map center

Asynchronous loading of JS

Map JS is a large package, more than 300 KB, the network consumption is terrible under the condition of poor network. It doesn’t matter, AMap has given the code for asynchronous loading. When you don’t need the map API, you don’t need to load it. Load it at your leisure or when you need it. Officials offer two ways:

1. Asynchronous scripts

  var url = 'the key values & the callback = https://webapi.amap.com/maps?v=1.4.15&key= you apply for onLoad';
  var jsapi = doc.createElement('script');
  jsapi.charset = 'utf-8';
  jsapi.src = url;
  document.head.appendChild(jsapi);
Copy the code

2, through the official MapLoader

   AMapLoader.load({
      key: ' '.// The obtained Web developer Key is required when the load is invoked for the first time
      version: '1.4.15'.// Specify the version of JSAPI to load, which is 1.4.15 by default
      plugins: ['AMap.Scale'].// List of plug-ins to use, such as Scale' amap.scale 'etc
      AMapUI: {
        // Whether to load AMapUI
        version: '1.1'.// AMapUI defaults to 1.1
        plugins: ['overlay/SimpleMarker'].// The AMapUI UI plug-in needs to be loaded
      },
      Loca: {
        // Whether to load Loca
        version: '1.3.2'.// Loca version, default 1.3.2
      },
    })
      .then((AMap) = > {
        var map = new AMap.Map('container');
        map.addControl(new AMap.Scale());
        new AMapUI.SimpleMarker({
          map: map,
          position: map.getCenter(),
        });
      })
      .catch((e) = > {
        console.error(e); // Load error message
      });
Copy the code

The official recommendation is to use the second method, the second method is elegant, why elegant.

  1. The code structure is clearer, the map version is clearer, the plug-ins need to be loaded, and more features are clear at a glance.
  2. It provides a unified interface, the amaploader.load method. Avoid the messy writing of asynchronously loading JS.
  3. By encapsulating the loading map JS process, we can constantly optimize the loading speed without changing the top application code. The application layer code is not perceptually, so as to understand the coupling.
  4. More advanced functionality can be provided through mediations.

Layer (Canvas), set depth relationship.

A layer is an abstract concept that visually covers a certain area of the map and is used to describe all or part of the map elements in the real world. A map usually consists of one or more layers. (Excerpted from AMap JSAPI documentation)

By default, amap creates a standard layer without passing the Layers option when initializing the map option.

new AMap.Map('container', {layers: undefined })
Copy the code

1. The original map looked like this:

2. After removing the amap-layer, it looks like this (z-index of the amap-layer is 0):

The layer seen here is from AmapMark layerAbove the standard layer.

We are used to call the text or icon that marks certain information on the base map annotations, such as POI annotations and road name annotations.

3. Removing the amap-labels layer looks like this (z-index = 99):

Here you can see that the amap-Layer layer is the standard layer of Amap, drawn on canvas.

As you can see, the depth relationship of amap’s layers is represented using the CSS property Z-index. Z-index of point marker is 120. The depth relationship is summarized as follows: Amap-layer < amap-labels < amap-markers

Therefore, if we want to add other elements to the map, such as small drag-and-drop cards, we need to set the card’s Z-index to at least 120 so that there are no supernatural events.

SetFitView (Set the appropriate map center point)

map.setFitView([polyline,marker1,])
Copy the code

This API allows the center of the map to be automatically repositioned to give a more complete view of the elements on each layer of the map, adjusting the view based on the coverage area. It takes an array, and any elements added to the map through the map.add method are passed in as elements of the array, and it automatically calculates the center point for us. Of course, we can go to the computing center by ourselves. Please use it. It’s algorithmically optimized. Thanks for reading and try the techniques described in this article to put together a class. If you’re inspired, put your hands up and give the writer a thumbs up for writing late at night.