Baidu map call

Steps to complete before calling Baidu Map

  1. Apply for a Baidu account
  2. Request key (AK)
  3. Click Get Key, and then click Create Application

Let’s look at the actual calls

< script type = "text/javascript SRC =" key "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=" > < / script > < body > < div id="container"></div> <script> var map = new BMapGL.Map("container"); Var point = new bmapgl. point (116.404, 39.915); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true) </script> </body> </html>Copy the code
  • First we need to implement a new instance to initialize the map, and then set the center point.
  • The map.CenterandZoom (point, 15) method creates a map. The first argument can be to create a map centered on a previously created point
  • CenterAndZoom The second parameter is the map zoom level, with a maximum of 19 and a minimum of 0
  • Map. EnableScrollWheelZoom (true) open the mouse wheel zoom

The above is just a simple use of it, let us slowly to dig out the mystery here

Drag and drop the map

  • map.disableDragging(); // Do not drag

Move the map and set the maximum and minimum zoom levels

  • var map = new BMap.Map(“allmap”,{minZoom:4,maxZoom:8}); // Create a Map instance and set the minimum/large level allowed for the Map
  • You can also set the level dynamically:

map.setMaxZoom(10); map.setMinZoom(2);

The map.setMapType method is used to change the map type to be displayed (the default map type is BMAP_NORMAL_MAP).

  • BMAP_NORMAL_MAP Displays a common street view
  • BMAP_SATELLITE_MAP This map type displays satellite views
  • BMAP_HYBRID_MAP | this map type show a mixture of satellite and network view map. SetMapType (BMAP_EARTH_MAP);

When adding controls to the map, you can set which of the four corners of the map to be placed in

  • BMAP_ANCHOR_TOP_LEFT indicates that the control is positioned in the upper left corner of the map.

  • BMAP_ANCHOR_TOP_RIGHT indicates that the control is located in the upper right corner of the map.

  • BMAP_ANCHOR_BOTTOM_LEFT indicates that the control is located in the lower left corner of the map.

  • BMAP_ANCHOR_BOTTOM_RIGHT indicates that the control is located in the lower right corner of the map.

Var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new bmapGL. Size(100, 0)Copy the code