Implement 51Map map interface (sample code)_javascript skills

51Map provides a map interface for free. The following is the calling interface and implements the geographical location labeling, storage, modification and echo functions.
51 Map URL: http://api.51ditu.com/

Introduce

Copy code into the web page. The code is as follows:

Mark on the map:

Copy code The code is as follows:

//Map annotation
$(document).ready(function() {
var ico=new LTIcon("",[24,24],[12,12]);
var map= new LTMaps("mapdiv");//Map object
var controlB; //Marker control
map.centerAndZoom("tianjin",5);//Tianjin
map.handleMouseScroll();// Mouse wheel
var controlZoom = new LTStandMapControl();//Zoom control
map.addControl( controlZoom);
controlB = new LTMarkControl();//Add a mark control and bind the event to the button
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener ( controlB,"mouseup",function(){getPoi(controlB)} );
})

Copy code The code is as follows:

//Execute this function when adding a markup
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$ ("#x").val(poi.getLongitude()); //x,y is the input tag id and is passed to the background storage location
$("#y").val(poi.getLatitude() ;

                                                                                                        style="color: #D01E14; font-weight: bolder; font-size: 12px;">If you can’t see the map, please click here

🎜>

Copy code The code is as follows:

//Map echo
$(document). ready(function(){
map("mapdiv");
})
//Map
function map(div){
var map=new LTMaps(div);// Map object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//Create mark

map.handleMouseScroll ();//Mouse wheel zoom
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //With coordinates Display the map for the center
map.addOverLay(marker) //Add markers to the map

}Modify the markers on the map:

Copy code


The code is as follows:

//Map echo
$(document).ready(function(){
map("mapdiv");
})
//Map
function map(div){
var map=new LTMaps(div);//Map object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y ").val()));//Create label
map.handleMouseScroll();//Mouse wheel zoom
map.centerAndZoom(new LTPoint($("#x").val(),$ ("#y").val()),5); //Display the map with the coordinates as the center
map.addOverLay(marker) //Add markers to the map
var controlZoom = new LTStandMapControl();
map.addControl( controlZoom );
//Add the mark control and bind the event to the button
var controlB = new LTMarkControl();//Mark the control
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){map.removeOverLay(marker,true);controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener (controlB,"mouseup",function(){getPoi(controlB)} );
}
//Execute this function when adding annotations
function getPoi(controlB){
var poi = controlB. getMarkControlPoint();
$("#x").val(poi.getLongitude());
$("#y").val(poi.getLatitude());
}

Other parameter settings:
You can customize the label icon style

Copy the code The code is as follows:

var ico=new LTIcon("",[24,24],[12,12]);// Create icon object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//Create mark
//When the mouse moves over the mark, the mark content can be displayed
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml('mark content')});