Baidu map you can use your own pictures, but if you use them directly locally, you can't get out. You must use online resources, which is very embarrassing

If I can't get online temporarily during the development process, can I not do the marker I want? Is it very uncomfortable

In fact, Baidu has given a solution to this problem. You can define your own covering, so you can use local icons for rendering

In the example given by the official website of Baidu map, you can} use it yourself with a little change

In essence, you can create a div with a custom overlay, and then we can set the style of the div, the background picture, the font, etc. is that much simpler and many business needs can be solved

1. The following is a slight change I made to someone else's, and I made notes in many places, which are very detailed

var markers = [];// A place for centralized storage of marker points
// Custom cover
function  SquareOverlay(center, opt, className) {
    this._center = center;  // Central coordinate point
    this._width = opt.width ;  // Width of cover 
    this._height = opt.height;  //Height of cover
    this._className = className ;    //  The class name of the currently displayed overlay
}
// BMAP. Inheriting API Overlay
SquareOverlay.prototype = new BMap.Overlay()
// Initialization method of cover
SquareOverlay.prototype.initialize = function(map) {
    // Save map instantiation object
    this._map = map;
    var that = this;
    // Create a div element as a container for custom overlays
    var div = document.createElement('div');
    div.style.position = "absolute";
    // Element appearance can be set according to parameters
    div.style.width = this._width + "px";
    div.style.height = this._height + 'px';
    div.className = this._className;  // Add class name and change style    
    // Add cover to element
    map.getPanes().markerPane.appendChild(div);
    // Save div instance
    this._div = div;
    // The div element needs to be used as the return value of the method. When calling the show
    // This element is manipulated by the api when the hide method or when the cover is removed
    return div;
}
// Draw cover
SquareOverlay.prototype.draw = function() {
    // Convert to pixel coordinates according to geographical coordinates and set it to the container
    var position = this._map.pointToOverlayPixel(this._center);
    this._div.style.left = position.x - this._width / 2 + "px";
    this._div.style.top = position.y - this._height / 2 + 'px';
}
// Remove the cover
SquareOverlay.prototype.clearOverlay = function() {
    this._map.removeOverlay(this);
}
// Show and hide coverings
// Implementation of display method    
SquareOverlay.prototype.show = function(){    
    if (this._div){    
        this._div.style.display = "";    
    }    
}      

// Implement hiding method  
SquareOverlay.prototype.hide = function(){    
    if (this._div){    
        this._div.style.display = "none";    
    }    
}
// Add cover
/*
    map       Map instance
    center    Central coordinate point
    opt       Properties of covering
    className The class name and class list of the cover are taken out alone
*/
var addOverlay = function (map, center, opt , className) {
    className = className || "";
    var marker = new SquareOverlay(center, opt, className);
    markers.push(marker);
    map.addOverlay(marker);
}

2. When we add marker points, we can directly} call the addOverlay method

But we have to do some preparatory work before adding it

Go to iconfont's official website to download an icon with a} logo

3. Then do some basic layout of style setting elements

 <style lang="">
        // Map style
        #allmap {
            width: 800px;
            height: 600px;
            margin: 100px auto;
            border: 1px solid #f00;
        }
        // The style of the cover takes the local icon
        .select {
            background: url('/imgs/select.png') no-repeat;
            background-size: 100% 100%;
        }
    </style>
<div id="allmap"></div>

4. Then call the method to generate marker point covering

var map = new BMap.Map('allmap');  
var point= new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 14);  
// Call a custom function to generate marker points
addOverlay(map, point, {width: 30, height : 35, text: '0'} , 'select')

Let's see the actual effect

In fact, according to the above expansion, we can also do many effects, such as adding text to div and moving the mouse to display some annotation information

Let me give a simple example, such as adding a number to it

5. First, set the color of the font and the height of the middle line on the style of the covering

// The style of the cover takes the local icon
        .select {
            background: url('/imgs/select.png') no-repeat;
            background-size: 100% 100%;
            color: #fff;
            text-align: center;
            line-height: 30px;
        } 

Then add an attribute of  text to the opt object parameter of addOverlay to indicate the text description in the overlay, and add a parameter of  text to the passed in parameter

this._text = opt.text || ''; / / text in overlay element

// Custom cover
function  SquareOverlay(center, opt, className) {
    this._center = center;  // Central coordinate point
    this._width = opt.width ;  // Width of cover 
    this._height = opt.height;  //Height of cover
    this._text = opt.text || '';      // Text in overlay element
    this._className = className ;    //  The class name of the currently displayed overlay
}

Then it is added to the generated cover

// Initialization method of cover
SquareOverlay.prototype.initialize = function(map) {
    // Save map instantiation object
    this._map = map;
    var that = this;
    // Create a div element as a container for custom overlays
    var div = document.createElement('div');
    div.style.position = "absolute";
    // Element appearance can be set according to parameters
    div.style.width = this._width + "px";
    div.style.height = this._height + 'px';
    div.innerHTML = this._text;
    div.className = this._className;  // Add class name and change style    
    // Add cover to element
    map.getPanes().markerPane.appendChild(div);
    // Save div instance
    this._div = div;
    // The div element needs to be used as the return value of the method. When calling the show
    // This element is manipulated by the api when the hide method or when the cover is removed
    return div;
}

Then, when we call, just pass in an additional text in the opt object parameter to represent the text of the description

I passed in a 6

// Call a custom function to generate marker points
 addOverlay(map, point, {width: 30, height : 35 , text: '6'} , 'select')

See if the actual effect is displayed on the cover

More front-end knowledge ， please pay attention to novice bloggers ， continuously update front-end knowledge