Web pages into your map

Often inserted in our official web page of the Baidu map, this is actually quite simple, follow the steps below step by step.

 

1. Go to Baidu to create a map of the site  http://api.map.baidu.com/lbsapi/creatmap/ 

See the following figure 2. The first step of the three small steps 1,2,3, open → 1. Locate the center point of the switching button inside the city, the city where you choose to show the input box → specific address, click Find, you can display the location map to be displayed on the right side of the map 

 

 2. Set 3. Open the map in which you can set the width and height map, decide which buttons to or not, is the position of the button can be set 

 

4. Add marked the first icon → "point mark", you can set a specific location points, displayed as a dot marked on the map, you can change the style of the point markers, you can also set the names and comments you want to display; the first two icons "tag line", you can draw a line routes; the third icon "word mark", you can write some text;

 

 Thus, a simple Baidu map location is set finished, the next step is to map into a web page;

5. Click "Get code", there will be a bomb box, inside the code is what we want, copy the code into an empty html file save, named "map.html"; 

 

 

6. It src path to write map.html, so you can display a map of your own settings in your web page, of course, the map width and height, appear correctly on the page where you want to write your own css. 

The paper switched from https://blog.csdn.net/qq_39533140/article/details/80042315

The effect is written out, but Baidu does not mark icon , as shown:

 

The solution is very simple, as long as the generated code to find the icon in the address:

 

//创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }

 

 http://app.baidu.com/map/images/us_mk_icon.png

替换成这个地址即可 http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png

图标 就出来了。