Implement the 51Map interface of the sample code
- 2020-03-29 23:55:02
- OfStack
51Map provides the map interface for free. The following is the calling interface and the implementation of geolocation annotation, storage, modification and echo functions.
51 map url: (link: http://api.51ditu.com/)
Introduced in web pages
<script type="text/javascript" src="http://api.51ditu.com/js/maps.js"></script>
Mark on the map:
//maps
$(document).ready(function(){
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);
var map=new LTMaps("mapdiv");//Map object
var controlB; //Tag controls
map.centerAndZoom("tianjin",5);// tianjin
map.handleMouseScroll();//The mouse wheel
var controlZoom = new LTStandMapControl();//Zoom control
map.addControl( controlZoom );
controlB = new LTMarkControl();//Add an annotation 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)} );
})
//This function is executed when an annotation is added
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude()); //X,y is the input tag id which is passed into the background store location
$("#y").val(poi.getLatitude());
}
<div id="mapdiv" style="width: 300px; height: 200px; position:static;">
<div align="center" style="margin: 12px;">
<a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank"
style="color: #D01E14; font-weight: bolder; font-size: 12px;"> If you can't see the map, click here </a>
</div>
</div>
Echo mark on the reading chart:
//Map the echo
$(document).ready(function(){
map("mapdiv");
})
// The map
function map(div){
var map=new LTMaps(div);//Map object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//Create a label
map.handleMouseScroll();//Mouse wheel zooming
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //Display the map centered on coordinates
map.addOverLay(marker) //Add annotations to the map
}
Modify the annotation on the map:
//Map the echo
$(document).ready(function(){
map("mapdiv");
})
// The map
function map(div){
var map=new LTMaps(div);//Map object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()));//Create a label
map.handleMouseScroll();//Mouse wheel zooming
map.centerAndZoom(new LTPoint($("#x").val(),$("#y").val()),5); //Display the map centered on coordinates
map.addOverLay(marker) //Add annotations to the map
var controlZoom = new LTStandMapControl();
map.addControl( controlZoom );
//Add an annotation control and bind the event to the button
var controlB = new LTMarkControl();//Tag controls
controlB.setVisible(false);
document.getElementById("addPosition").onclick=function (){map.removeOverLay( marker,true);controlB.btnClick()};
map.addControl( controlB );
LTEvent.addListener( controlB,"mouseup",function(){getPoi(controlB)} );
}
//This function is executed when an annotation is added
function getPoi(controlB){
var poi = controlB.getMarkControlPoint();
$("#x").val(poi.getLongitude());
$("#y").val(poi.getLatitude());
}
Other parameter Settings:
You can customize the annotation icon style
var ico=new LTIcon("<c:url value='/images/manPosition.gif'/>",[24,24],[12,12]);//Create icon object
var marker=new LTMarker(new LTPoint($("#x").val(),$("#y").val()),ico);//Create a label
//When the mouse moves over the label, the label can be displayed
LTEvent.addListener( marker , "mouseover" , function(){this.openInfoWinHtml(' Tagging content ')});