Implement 51Map map interface (sample code)_javascript skills-JS Tutorial-php.cn

Implement 51Map map interface (sample code)_javascript skills

WBOY

Release： 2016-05-16 17:13:11

Original

1301 people have browsed it

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')});