This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Baidu map development series of personalized map use of two methods

Write in front:

  • This article is one of the series articles on Baidu Map development.

    Early review:

    1. WebGIS, based on Baidu Map HelloWord implementation
    2. How to use front-end CSS code to remove the icon in the lower left corner of Baidu Map
    3. Use baidu map dot, line, face | Javascript
    4. Baidu Map development series of personalized map use of two methods (this explanation)

    The above video tutorial (blog and video before the serial number is one-to-one correspondence) :

    1. Baidu map development from zero 00 initialization map creation helloWorld
    2. Baidu map development from scratch 01 go to the map icon in the lower left corner

  • Personal front-end blog website: Zhangqiang.hk.cn

  • Welcome to join the blogger front-end learning QQ exchange group: : 706947563, focus on front-end development, learning and progress together!

1 rendering

2 Official Documents

Lbsyun.baidu.com/index.php?t…

Three people digest and understand

3.1 introduction

Personalization map, in short, allows your map base to become any base you want to become.

3.2 How to Use it

3.2.1 Preparations

  1. Go to the Map Open Platform console page, in my Map, create a map style

  1. Select a style template or edit a custom style (which I think is aesthetically pleasing) and click Publish to get the style ID. You can also download JSON for the second method.

  1. This gives us a style file and a style ID, one of which can be implemented, just to show you how to use the methods in 2.

3.3 Usage Method 1 (Style ID)

Just do that in your code, and then that string of ids is your style ID

  map.setMapStyleV2({
    styleId: '3058e0dabfad159d876a8a7034f7c95b'
  });
Copy the code

3.4 Usage method 2 (Style File)

The first step is to copy the styled Json file to the application folder, and then do the same

window.onload = function () { var url = ".. /config/custom_map_config.json"; Var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function () { if (request.status == 200) { var styleJson = JSON.parse(request.responseText); // console.log(styleJson); map.setMapStyleV2({ styleJson: styleJson }); }}}Copy the code

4 source

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; Charset = UTF-8 "/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/ CSS "> body, html, #allmap { width: 100%; height: 100%; overflow: hidden; margin: 0; Font-family: 'Microsoft yahei'; } #allmap .anchorBL img { display: none; } #allmap .BMap_cpyCtrl span { display: none ! important; } </style> <script type="text/javascript" SRC = "/ / api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos" > < / script > < title > baidu map < / title > </head> <body> <div id="allmap"></div> </body> </ HTML >< script type="text/javascript"> Var map = new bmapgl. map ("allmap"); CenterAndZoom (new bmapgl. Point(116.404, 39.915), 11); / / initialization map, set the center coordinates and level / / personality map style - method 1 / / map. SetMapStyleV2 ({/ / styleId: '3058 e0dabfad159d876a8a7034f7c95b / /}); Json window.onload = function () {var url = ".. /config/custom_map_config.json" var request = new XMLHttpRequest(); request.open("get", url); request.send(null); request.onload = function () { if (request.status == 200) { var styleJson = JSON.parse(request.responseText); // console.log(styleJson); map.setMapStyleV2({ styleJson: styleJson }); } } } map.enableScrollWheelZoom(true); </script>Copy the code

5 Source repository address

The following repository is the source address of this article and the repository address of this series. The source code will be updated in this repository.

HTML at main · Front-end-study -GoGoGo/ webGIS-basic-bmapgl (github.com)