Baidu map usage

AK obtain

1. Register an account on Baidu map Developer Platform   https://lbsyun.baidu.com/

2. Create a map app

3. obtain AK

Use Baidu map

1. introduce js

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

2. Create a container for the map ( You can define the width and height of the map )

<div id="container"></div>
<style type="text/css">
       /* The width and height of the container map   */
      #container {
        height: 600px;
        width: 800px;
      }
</style>

3. Initialize map

var map = new BmapGL.Map("container")
var  point = new BmapGL.Point( longitude , latitude )
map.centerAndZoom(point,16)

Add functionality

You can add many functions to the created map ： Mouse scrolling and contracting 、 Add some 、 draw a circle 、 Add text annotations

1. Mouse scrolling and zooming

map.enableScrollWheelZoom(true);

2. Add some

var marker = new BMapGL.Marker(point);  
map.addOverlay(marker); 

You can also link the added points

var lineArr = [];
        //  Record one by one 
        var last = null;
        //  Add event       
        map.addEventListener("click",e=>{  
            //   If there is a previous one, remove the previous one 
            last?map.removeOverlay(last):'';       
            //  Get the location of the click point ( longitude , latitude )
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); 
            //  Add to array component 
            lineArr.push(p);
            //  Create a tag 
            var m = new BMapGL.Marker(p); 
            //  Redefine the previous 
            last = m;
            //  show marks 
            map.addOverlay(m);     

        })

Then add an event to the mouse to make the previous point link when clicking the mouse

map.addEventListener("dblclick",function(){
            tempMarker?map.removeOverlay(tempMarker):'';// If there is tempMarker Remove 
			list.push(list[0]);// The first 0 Copy one point and add it to the end 
			//  Draw the line 
			var polyline = new BMapGL.Polygon(list, {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5,fillColor:"#f00",fillOpacity:0.5})
			list = [];// Empty list
			map.addOverlay(polyline);
})

After completing these, you will get the following map

3. add controls

var scaleCtrl = new BMapGL.ScaleControl();  //  Add scale bar control 
        map.addControl(scaleCtrl);

        var zoomCtrl = new BMapGL.ZoomControl();  //  Add a zoom control 
        map.addControl(zoomCtrl);
        
        var cityCtrl = new BMapGL.CityListControl();  //  Add city list control 
        map.addControl(cityCtrl);

 4. draw a circle

var circle = new BMapGL.Circle(point,1000,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); // Create circles 
 map.addOverlay(circle);  

5. Add text annotations

var content = "<strong style='color:red'> China </strong>";
        var label = new BMapGL.Label(content, {       //  Create text annotation 
            position: point,                          //  Set the geographic location of the dimension 
            offset: new BMapGL.Size(10, 20)           //  Set the offset of the dimension 
        })  
        map.addOverlay(label);  

6. Search for

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(113.6648,34.7835);
map.centerAndZoom(point,17);
// Define a local map search 
var local = new BMapGL.LocalSearch(map,{
	renderOptions:{map:map}
})
 $(function(){
	 //  add to input event 
	 $(".keyword").on("input",function(e){
		 //  adopt ajax Request server address 
		 $.ajax({
			 url:`https://api.map.baidu.com/place/v2/suggestion?query=${$(".keyword").val()}&region= zhengzhou &city_limit=true&output=json&ak=3pu554R4LxktRbjImRnmwFqo7yIxI5yV`,
			 dataType:"jsonp" // type jsonp
		 })
		 .then(res=>{
			 //  Output the requested content 
			 console.log(res);
			 var str = "";
			 // Variable result Add up str
			 for(var i=0;i<res.result.length;i++){
				 str+=`<div class="item">${res.result[i].name}</div>`
			 }
			 // Set up thml
			 $(".tip").html(str);
		 })
	 })
			 
	 // single click tip  Get corresponding item Value , hide tip
	 $(".tip").on("click",".item",function(){
		 // Using the proxy method , obtain item Content 
		 var str = $(this).text();
		 // Output 
		 local.search(str); // Search for keywords 
		 console.log(str,"this");
		 // Empty tip
		 $(".tip").html("");
	 })
	 $.ajax({
		 url:"https://api.map.baidu.com/location/ip?ak=3pu554R4LxktRbjImRnmwFqo7yIxI5yV&ip=&coor=bd09ll",
		 dataType:"jsonp"
	 })
	 .then(res=>{
		 console.log(res);
		 $("body").append(`<p>${res.content.address}</p>`)
	 })
 })