Page added map map

1, first of all have key AK, you can register themselves or get someone else's copy. Search Baidu Maps API (http://lbsyun.baidu.com/apiconsole/key)

2, an example of a map

< Head > 
        < Meta charset = "UTF-. 8" > 
        < title > </ title > 
        < Script type = "text / JavaScript" the src = "http://api.map.baidu.com/api?v=2.0&ak weuMwIVhzBCjZgGaPA5SVOQV = " > </ Script > // here is the introduction, ak = your key
　　　　< Script of the type =" text / JavaScript " src =" https://api.map.baidu.com/api?v=2.0&ak your key = S = 1 & " > </ Script > // If https site, the back to add & S = 1 

    </ head >
        <style>
            *{margin:0;padding:0;}
            #container{
                margin:50px auto;
                width:800px;height:600px;
                border:2px solid #F65F57;
            } 
        </style>
    <body>
        <div id="container"></div>  //显示地图的div
        <script type = "text / JavaScript" > 
            var Map =  new new BMap.Map ( ' Container ' ); // Create a map instance   
            var Point =  new new BMap.Point ( 114.059627 , 22.627415 ); // create point coordinate 
            map.centerAndZoom (point, 16 );     // initialize the map, set the center coordinates and map zoom level 
            Map.addControl ( new new BMap.NavigationControl ());   // add pan and zoom controls, the upper left position 
            Map.addControl ( new new BMap.ScaleControl ()); // add scale control, bottom left position
            Map.addControl ( new new BMap.MapTypeControl ()); // map type control, top right position 
            Map.addControl ( new new BMap.OverviewMapControl ()); 
             var marker =  new new BMap.Marker (Point); // create a label     
            map. to addOverlay (marker);    // be added to the map labels 
            
            MSG = {     
                   width: 300 ,      // information window width     
                   height: 50 ,      // information window height     
                   title: " About ", // information window title    
                   offset: new new BMap.Size ( . 8 , - 12 is ) // set position, corresponding to the relative positioning css relative 
            }     
            
            // create a window object information, write text 
            var infoWindow =  new new BMap.InfoWindow ( " < ! p> hello world </ p > <div style = 'color: red;'> phone Service: 123456 </ div> " , MSG);     
            map.openInfoWindow (infoWindow, map.getCenter ());       // page display information window 

        </ Script > 
    </ body >

Figure:

Cited Original: https: //www.cnblogs.com/luhailin/p/6639943.html

Guess you like