First of all, the project's requirements for maps: adding a map management module in the background, requiring each vehicle to be labeled on the map, and clicking on the label should show the relevant information of the vehicle, such as the license plate and the current status of the vehicle.

The following figure is the effect of the implementation.

Of course, we can also see this from the Golden Map api, such as multi-point annotation, simple information forms, all of which have api, you can first look at the official website, and then look at my article, how to fuse together, remember that all the data are from the background database, so as to ensure that all the data are dynamic and can be updated in real time.

First, map is defined to render the underlying map.

var map = new AMap.Map('container', {
    resizeEnable: true,   
    zoom: 5
});  

I don't currently have a definition of an IP address that automatically locates the IP to get the center point. Next, obstacles need to be cleared, and several variables need to be considered globally.

map.clearMap();  
var markers = []; 
var infoWindow;

Okay, then I start to request data. The data mainly includes the coordinate points and the parameters to be displayed in the information form, such as my waybill number, vehicle status, license plate number and so on.

$.ajax({
	url : "eos_TranOrderFollowing/mapcartrans.do",
	type : "get",
	dataType : "json",

	success : function(e) {
		
		// var data=[{"fLong":'112.00003','fLati':'38.2345'},{"fLong":'115.00003','fLati':'38.2345'},{"fLong":'114.00003','fLati':'38.2345'},{"fLong":'116.00003','fLati':'38.2345'}];
		// e.data = data;
		var marker;		
		for(var i=0 ; i< e.data.length;i++){
			var jfong=[ e.data[i].fLong,e.data[i].fLati];	
				marker = new AMap.Marker({
			    position: jfong,
			    zIndex: 101,
			    map:map
				});	
				console.log(e.data[3]);	
			marker.setMap(map);	
			marker.orderON=e.data[i].orderON;
			marker.tranOFID=e.data[i].tranOFID;
			marker.fhadd=e.data[i].fhadd;
			marker.sAdd=e.data[i].sAdd;
			marker.status=e.data[i].status;			
			 marker.on('click', function(e){
				
				 infoWindow.setContent("<ul class='main'><li> Shipping Bill No. <span style='color:blue'>"+e.target.orderON+"</span></li>" 
				         + "<li>  Parking Number: <span style='color:blue'>"+e.target.tranOFID+"  </span></li>" 
				         + "<li>  Shipping Address: <span style='color:blue'>"+e.target.fhadd+"  </span></li>"
				         + "<li>  Receiving address: <span style='color:blue'>"+e.target.sAdd+"  </span></li>"
				         + "<li>  Vehicle status : <span style='color:blue'>"+e.target.status +"  </span></li></ul>");
				 infoWindow.open(map, e.lnglat);
			 });
			
			
		}	// for-end
		
		infoWindow = new AMap.InfoWindow({
			isCustom:	true,
			draggable: true,  //Is it draggable?
	        offset: new AMap.Pixel(0, -31),
	        content:""
	    });
		
	}
		

}) //	Ajax End

Because there are many markers I want to show, and there must be more than one data returned from the background, so I get all the coordinates through the for loop. I define the jfong variable, for example, I have 16 coordinate points, then define the marker, and position = jfong; so I can also get 16 marker points, and then add the icon, which needs to customize the icon to see the official website. The api is simple.

marker.setMap(map);

So the multi-point marker is implemented, and then the information form. Because the dynamic data we need to display in the information form is in success: function (E), that is, in E. And when you click on the icon, the function (e), which is defined by the Golden Map, needs to assign our own parameters to it, that is, the marker. parameter name = E.data[i]. parameter name in the code. After this assignment, you can print (e) to see the data, and then get it through the e.Target. parameter name. Information form need not say much, the key parameter assignment is OK. I am a custom information form, through setContent The parameters are set dynamically.

Well, such a multi-point annotation + dynamic information form is easy to implement.