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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn