Baidu map - introductory tutorial

Catalog

One 、 Log in to your account and get your secret key

Get the secret key

Two 、 Bring in the map

3、 ... and 、 Create a map container

Four 、 Define box size

5、 ... and 、 Set map detail style

---

One 、 Log in to your account and get your secret key

Get the secret key

Log in to baidu account

 

A new... Will appear after submission AK That is the so-called secret key

At this time, it can be directly used to call

Two 、 Bring in the map

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak= Your secret key ">

3、 ... and 、 Create a map container

Then create a box

<div id="container"></div>

Four 、 Define box size

Set the box size and hide logo And copyright

        #container {
            margin: 100px auto;
            width: 500px;
            height: 300px
        }
        /*  Baidu maps copyright  */
        .BMap_cpyCtrl {
            display: none;
        }
        /*  Baidu Maps logo */
        .anchorBL {
            /* display: none; */
        }

5、 ... and 、 Set map detail style

    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        //  Allow zooming in and out 
        map.enableScrollWheelZoom(true);
        //  Create a map instance  
        var point = new BMapGL.Point(121.467406, 31.411477, 20);
        //  Create tag location 
        var marker = new BMapGL.Marker(new BMapGL.Point(121.467406, 31.411477));
        //  Default magnification 
        map.centerAndZoom(point, 20);
        function addOverlay() {
            map.addOverlay(marker); //  Add points 
        }
        addOverlay()
        var opts = {
            width: 200,     //  Information window width 
            height: 100,     //  Information window height 
            title: " Exclusive zone for children ", //  Message window title 
            message: " This is an apartment "   
        }
        var infoWindow = new BMapGL.InfoWindow(" Address ： Shanghai xx District xx road xxxxx", opts);  //  Create information window object  
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); // Open the message window 
        });
        //  Initialize map , Set center point coordinates and map level  
        var geolocation = new BMapGL.Geolocation();
        var geoc = new BMapGL.Geocoder();
        console.log(geoc);
    </script>

The effect is as follows ：

If you want to get the coordinate position by yourself, you can use Pick the coordinate system